談一次異步上傳到又拍雲的案例教程

做者：白狼 出處：http://www.manks.top/article/async_upload_to_upyun 本文版權歸做者，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。

網站靜態文件存儲在又拍雲，以前上傳是經過又拍雲的的FORM API進行。

當產品經理歪着腦殼走向你的時候，哎呀呀，這用戶信息這裏，上傳要無刷新的效果了。

這他***，本身偷偷抱怨一會會，怎麼搞喃？據說這傢伙要一個好聽的名字，異步上傳，高大上檔次挺像個人。

根據咱們的觀察，此處有兩個重點：

①、怎麼實現異步上傳

②、怎麼上傳到又 拍 雲

首先咱們要實現異步上傳，就須要利用js裏面的FormData對象，聽說，這傢伙不支持ie6 7的，ie8就不太清楚了，聽說哈，說錯了不負責的。

不過喃，咱們也不用考慮辣麼多，前段時間都據說淘寶都要放棄ie6 7了，so 甭考慮辣麼多了。ie6 7逮着ta估計都要罵ta小婊砸，居然敢不支持我。

FormData是誰，這裏就很少介紹了，能夠自行百度。

咱們先來看看view層怎麼使用FormData這個小婊砸

<input type="file" accept="image/jpg,image/jpeg,image/png,image/gif" id="upload">
<input type="hidden" name="file">

如你所想，僅僅是一個input上傳按鈕和一個咱們預留的準備接收圖片地址的隱藏input

下面來看看JS是怎麼憤怒的吧

<script type="text/javascript">
function($){
  //上傳
  $("#upload").on("change", function () {
  //構造FormData對象並賦值
    var formData = new FormData();
    formData.append("policy", "//controller層傳遞過來upYun的policy配置");
    formData.append("signature", "//controller層傳遞過來upyun的signature配置");
    formData.append("file", $("#upload")[0].files[0]);
    $.ajax({
      url : "//處理上傳的後端程序地址",
      type : "POST",
      data : formData,
      processData : false,
      contentType : false,
      beforeSend: function () {
        //能夠作一些正在上傳的效果
      },
      success : function(data) {
        //data，咱們這裏是異步上傳到後端程序所返回的圖片地址
      },
      error : function(responseStr) {
        console.log(responseStr);
      }
    });
  });
}($);
</script>

到此，咱們已經實現了異步上傳的前端代碼，包括又拍雲所須要的參數policy和signature

剩下的實現上傳到又拍雲就簡單了，能夠參考

https://github.com/upyun/php-sdk 進行處理