又拍雲非同步上傳執行個體教程詳解_php執行個體

網站靜態檔案儲存體在又拍雲，之前上傳是通過又拍雲的的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 進行處理