又拍云異步上傳實例教程詳解
網(wǎng)站靜態(tài)文件存儲在又拍云,之前上傳是通過又拍云的的FORM API進(jìn)行。
當(dāng)產(chǎn)品經(jīng)理歪著腦袋走向你的時候,哎呀呀,這用戶信息這里,上傳要無刷新的效果了。
這他***,自己偷偷抱怨一會會,怎么搞喃?聽說這家伙要一個好聽的名字,異步上傳,高大上檔次挺像我的。
根據(jù)我們的觀察,此處有兩個重點(diǎn):
①、怎么實現(xiàn)異步上傳
②、怎么上傳到又 拍 云
首先我們要實現(xiàn)異步上傳,就需要利用js里面的FormData對象,據(jù)說,這家伙不支持ie6 7的,ie8就不太清楚了,據(jù)說哈,說錯了不負(fù)責(zé)的。
不過喃,我們也不用考慮辣么多,前段時間都聽說淘寶都要放棄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上傳按鈕和一個我們預(yù)留的準(zhǔn)備接收圖片地址的隱藏input
下面來看看JS是怎么憤怒的吧
<script type="text/javascript">
function($){
//上傳
$("#upload").on("change", function () {
//構(gòu)造FormData對象并賦值
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)實現(xiàn)了異步上傳的前端代碼,包括又拍云所需要的參數(shù)policy和signature
剩下的實現(xiàn)上傳到又拍云就簡單了,可以參考
https://github.com/upyun/php-sdk 進(jìn)行處理
相關(guān)文章
thinkphp3.x中display方法及show方法的用法實例
這篇文章主要介紹了thinkphp3.x中display方法及show方法的用法,結(jié)合實例形式分析了thinkPHP3.x模板的功能、定義、賦值、渲染及輸出等技巧,需要的朋友可以參考下2016-05-05
Laravel + Elasticsearch 實現(xiàn)中文搜索的方法
這篇文章主要介紹了Laravel + Elasticsearch 實現(xiàn)中文搜索的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
thinkphp3.2.2實現(xiàn)生成多張縮略圖的方法
這篇文章主要介紹了thinkphp3.2.2實現(xiàn)生成多張縮略圖的方法,通過調(diào)用ThinkPHP擴(kuò)展包的UploadFile類實現(xiàn)針對上傳圖片的縮略圖處理,非常具有實用價值,需要的朋友可以參考下2014-12-12
php+mysql實現(xiàn)簡單登錄注冊修改密碼網(wǎng)頁
這篇文章主要為大家詳細(xì)介紹了php+mysql實現(xiàn)簡單登錄注冊修改密碼系統(tǒng),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11
關(guān)于ThinkPhp 框架表單驗證及ajax驗證問題
tp數(shù)據(jù)驗證有兩種方式,一種是靜態(tài)方式,一種是動態(tài)方式,下面小編給大家?guī)砹薚hinkPhp 框架表單驗證及ajax驗證問題,感興趣的朋友一起看看吧2017-07-07

