时间:2021-05-25
网站静态文件存储在又拍云,之前上传是通过又拍云的的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 进行处理
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在前面给大家写个有关文件上传的文章,包括最基本的yii2文件上传、异步上传到又拍云以及百度编辑器图片上传的问题,貌似不说点多图上传的就不完美。今天介绍一款多图上
近期有许多盆友跟我说该如何去提升拼多多平台淘宝主图。今日,实例教程也不共享了,由于以前写了过多详尽的实例教程了,许多的盆友都说太难弄了又弄不好,太瞎折腾時间了!
有关淘宝网(电商运营网)店面装修实例教程,我想说的是的是那样的实例教程如今在网络上能够搜到许多,针对初学者来讲根据一些技术专业的实例教程来学习淘宝店面装修是
有关淘宝网店室内装修实例教程,想对你说的是那样的实例教程如今在网络上能够搜到许多,针对初学者来讲根据一些技术专业的实例教程来学习淘宝店面装修是一个十分非常好
此实例教程另外适用【关注店铺】、【抽奖活动】、作用推广方法,主页照片可提交自身的照片。下列实例教程为共享砍价活动推广到移动端店铺首页实例:「实际效果浏览」「操作