谈一次ajax上传图片到又拍云案例分享

之前图片上传到又拍云直接用的是HTTP FORM API ,今天项目中遇到AJAX上传后图片显示的效果，回过头来想想，跟HTTP FORM API表单提交的过程基本类似，作如下分享，希望有个帮助。

//封装好的公共方法
/**
  * 获取上传到upyun所需要的配置参数
  */
function getUpYunConfig () 
{
    //关于upanyun基本配置项就不做细述了，我们这里配置到后台，直接读取
    $bucket = ...
    $form_api_secret = ...
    
    $options = array(
        'bucket' => $bucket, // 空间名
        'expiration' => time() + 600, // 授权过期时间
        'save-key' => '/img/{year}/{mon}/{random}{.suffix}',
        'allow-file-type' => 'jpg,jpeg,gif,png,doc,pdf,mp3,mp4,amr',
    );
    //policy算法和signature算法具体请参考API文档，不做细述
    $policy = base64_encode(json_encode($options));
    $sign = md5($policy.'&'.$form_api_secret); /// MD5的操作员密码
    
    return array(
        'sign' => $sign,
        'policy' => $policy,
        'bucket' => $bucket,
    );
}

//controller文件，我们利用上面的function,获取上传到upyun的配置信息
$configUpYun = getUpYunConfig();

//异步上传文件的核心是要利用xhr2的FormData对象进行操作。
//view视图文件
<input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple id="upload_head">
<input type="hidden" name="head">

<script type="text/javascript">
+function($){
  $.policy = '<?php echo $configUpYun["policy"];?>';
  $.signature = '<?php echo $configUpYun["sign"];?>';
  
  //上传头像
  $("#upload_head").on("change", function () {
    var formData = new FormData(); //构造空对象，下面用append 方法赋值。
    formData.append("policy", $.policy);
    formData.append("signature", $.signature);
    formData.append("file", $("#upload_head")[0].files[0]);
    $.ajax({
      url : "/upload.php",
      type : "POST",
      data : formData,
      processData : false,
      contentType : false,
      beforeSend: function () {
        //可以做一些正在上传的效果
      },
      success : function(data) {
        //data，我们这里是异步上传到upanyun后返回的图片地址，详细看下面的upload.php
      },
      error : function(responseStr) {
        console.log(responseStr);
      }
    });
  });
}($);

//upload.php 我们异步处理上传文件的程序
$url = upload2upy($_FILES['file']);
exit($url);

//upload2upy方法可参考upyun官方php-sdk文件
https://github.com/upyun/php-sdk
</script>

实现异步上传到upyun的核心：

①、利用xhr2的FormData对象

②、参考php-sdk文档即可 

来源：oschina

链接：https://my.oschina.net/u/2486665/blog/636558