源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-04-29 17:43 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:又拍云异步上传实例教程详解
网站静态文件存储在又拍云,之前上传是通过又拍云的的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 [b]下面来看看JS是怎么愤怒的吧[/b]
 <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 剩下的实现上传到又拍云就简单了,可以参考 [url=https://github.com/upyun/php-sdk]https://github.com/upyun/php-sdk [/url]进行处理
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部