又拍云異步上傳實(shí)例教程詳解

更新時(shí)間：2016年04月19日 16:05:04 作者：白狼棧

這篇文章主要介紹了又拍云異步上傳實(shí)例教程詳解的相關(guān)資料,需要的朋友可以參考下

網(wǎng)站靜態(tài)文件存儲(chǔ)在又拍云，之前上傳是通過又拍云的的FORM API進(jìn)行。

當(dāng)產(chǎn)品經(jīng)理歪著腦袋走向你的時(shí)候，哎呀呀，這用戶信息這里，上傳要無刷新的效果了。

這他***，自己偷偷抱怨一會(huì)會(huì)，怎么搞喃？聽說這家伙要一個(gè)好聽的名字，異步上傳，高大上檔次挺像我的。

根據(jù)我們的觀察，此處有兩個(gè)重點(diǎn)：

①、怎么實(shí)現(xiàn)異步上傳

②、怎么上傳到又拍云

首先我們要實(shí)現(xiàn)異步上傳，就需要利用js里面的FormData對(duì)象，據(jù)說，這家伙不支持ie6 7的，ie8就不太清楚了，據(jù)說哈，說錯(cuò)了不負(fù)責(zé)的。

不過喃，我們也不用考慮辣么多，前段時(shí)間都聽說淘寶都要放棄ie6 7了，so 甭考慮辣么多了。ie6 7逮著ta估計(jì)都要罵ta小婊砸，竟然敢不支持我。

FormData是誰，這里就不多介紹了，可以自行百度。

我們先來看看view層怎么使用FormData這個(gè)小婊砸

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

如你所想，僅僅是一個(gè)input上傳按鈕和一個(gè)我們預(yù)留的準(zhǔn)備接收?qǐng)D片地址的隱藏input

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

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

到此，我們已經(jīng)實(shí)現(xiàn)了異步上傳的前端代碼，包括又拍云所需要的參數(shù)policy和signature

剩下的實(shí)現(xiàn)上傳到又拍云就簡(jiǎn)單了，可以參考

https://github.com/upyun/php-sdk 進(jìn)行處理

您可能感興趣的文章:

相關(guān)文章

thinkphp3.x中display方法及show方法的用法實(shí)例
這篇文章主要介紹了thinkphp3.x中display方法及show方法的用法,結(jié)合實(shí)例形式分析了thinkPHP3.x模板的功能、定義、賦值、渲染及輸出等技巧,需要的朋友可以參考下
2016-05-05
ThinkPHP5對(duì)接IOS蘋果支付代碼
前端在調(diào)起蘋果支付前,先請(qǐng)求到服務(wù)端,服務(wù)端先生成一條充值記錄,但是狀態(tài)為：未支付；然后把這個(gè)訂單id發(fā)給前端,前端在支付完成的時(shí)候,會(huì)收到蘋果的支付憑證,將此憑證和訂單id回傳給服務(wù)端,訂單id的作用是用來確定是哪一筆,支付憑證是拿來校驗(yàn)是否支付成功
2023-08-08
Laravel + Elasticsearch 實(shí)現(xiàn)中文搜索的方法
這篇文章主要介紹了Laravel + Elasticsearch 實(shí)現(xiàn)中文搜索的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
thinkphp3.2.2實(shí)現(xiàn)生成多張縮略圖的方法
這篇文章主要介紹了thinkphp3.2.2實(shí)現(xiàn)生成多張縮略圖的方法,通過調(diào)用ThinkPHP擴(kuò)展包的UploadFile類實(shí)現(xiàn)針對(duì)上傳圖片的縮略圖處理,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2014-12-12
php+mysql實(shí)現(xiàn)簡(jiǎn)單登錄注冊(cè)修改密碼網(wǎng)頁(yè)
這篇文章主要為大家詳細(xì)介紹了php+mysql實(shí)現(xiàn)簡(jiǎn)單登錄注冊(cè)修改密碼系統(tǒng),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
PHP未登錄自動(dòng)跳轉(zhuǎn)到登錄頁(yè)面
為了滿足用戶體驗(yàn)度，需要用戶登錄才能跳轉(zhuǎn)到頁(yè)面，這篇文章給大家分享PHP未登錄自動(dòng)跳轉(zhuǎn)到登錄頁(yè)面的實(shí)例代碼，需要的朋友參考下
2016-12-12
Laravel框架生命周期與原理分析
這篇文章主要介紹了Laravel框架生命周期與原理,結(jié)合實(shí)例形式總結(jié)分析了Laravel框架針對(duì)用戶請(qǐng)求響應(yīng)的完整運(yùn)行周期、流程、原理,需要的朋友可以參考下
2018-06-06
關(guān)于ThinkPhp 框架表單驗(yàn)證及ajax驗(yàn)證問題
tp數(shù)據(jù)驗(yàn)證有兩種方式，一種是靜態(tài)方式，一種是動(dòng)態(tài)方式，下面小編給大家?guī)砹薚hinkPhp 框架表單驗(yàn)證及ajax驗(yàn)證問題，感興趣的朋友一起看看吧
2017-07-07
PHP 讀取大文件并顯示的簡(jiǎn)單實(shí)例(推薦)
下面小編就為大家?guī)硪黄狿HP 讀取大文件并顯示的簡(jiǎn)單實(shí)例(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
PHP CURL獲取cookies模擬登錄的方法
利用PHP的curl函數(shù)實(shí)現(xiàn)模擬登錄的方法。
2013-11-11