程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> PHP綜合 >> 又拍雲異步上傳實例教程詳解

又拍雲異步上傳實例教程詳解

編輯: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 進行處理

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved