談一次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文檔便可