异步上传到又拍云的实例教程,异步上传实例教程
作者:白狼 出处: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
这个小婊砸
1 2 | <input type= "file" accept= "image/jpg,image/jpeg,image/png,image/gif" id= "upload" >
<input type= "hidden" name= "file" >
|
Salin selepas log masuk
如你所想,仅仅是一个input
上传按钮和一个我们预留的准备接收图片地址的隐藏input
下面来看看JS
是怎么愤怒的吧
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script type= "text/javascript" >
function ($){
$( "#upload" ).on( "change" , function () {
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) {
},
error : function (responseStr) {
console.log(responseStr);
}
});
});
}($);
</script>
|
Salin selepas log masuk
到此,我们已经实现了异步上传的前端代码,包括又拍云所需要的参数policy
和signature
剩下的实现上传到又拍云就简单了,可以参考
https://github.com/upyun/php-sdk 进行处理
http://www.bkjia.com/PHPjc/1121566.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1121566.htmlTechArticle异步上传到又拍云的实例教程,异步上传实例教程 作者:白狼 出处:www.manks.top/article/async_upload_to_upyun 本文版权归作者,欢迎转载,但未经...