又拍云异步上传实例教程详解

前端之家收集整理的这篇文章主要介绍了又拍云异步上传实例教程详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

网站静态文件存储在又拍云,之前上传是通过又拍云的的FORM API进行。

当产品经理歪着脑袋走向你的时候,哎呀呀,这用户信息这里,上传要无刷新的效果了。

这他***,自己偷偷抱怨一会会,怎么搞喃?听说这家伙要一个好听的名字,异步上传,高大上档次挺像我的。

根据我们的观察,此处有两个重点:

①、怎么实现异步上传

②、怎么上传到又 拍 云

首先我们要实现异步上传,就需要利用js里面的FormData对象,据说,这家伙不支持ie6 7的,ie8就不太清楚了,据说哈,说错了不负责的。

不过喃,我们也不用考虑辣么多,前段时间都听说淘宝都要放弃ie6 7了,so 甭考虑辣么多了。ie6 7逮着ta估计都要骂ta小婊砸,竟然敢不支持我。

FormData是谁,这里就不多介绍了,可以自行百度

我们先来看看view层怎么使用FormData这个小婊砸

PHP;">

如你所想,仅仅是一个input上传按钮和一个我们预留的准备接收图片地址的隐藏input

下面来看看JS是怎么愤怒的吧

上传 $("#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); } }); }); }($);

到此,我们已经实现了异步上传的前端代码包括又拍云所需要的参数policy和signature

剩下的实现上传到又拍云就简单了,可以参考

PHP-sdk ">https://github.com/upyun/PHP-sdk 进行处理

原文链接:https://www.f2er.com/php/19954.html

猜你在找的PHP相关文章