您的位置：首页 > 编程技术 > php  >  又拍云异步上传实例教程详解

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

 更新时间：2016年4月23日 10:11  点击：2418

网站静态文件存储在又拍云，之前上传是通过又拍云的的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 进行处理

[!--infotagslink--]

相关文章

  • js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09

  • smartupload实现文件上传时获取表单数据(推荐)

    这篇文章主要介绍了smartupload实现文件上传时获取表单数据的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2017-01-09

  • BootStrap Progressbar 实现大文件上传的进度条的实例代码

    这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料，非常不错，具有参考借鉴价值，需要的朋友可以参考下...2016-07-01

  • HTML5实现微信拍摄上传照片功能

    这篇文章主要介绍了HTML5实现微信拍摄上传照片功能，实现HTML5 Canvas手机拍摄，本地压缩上传图片时遇到问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-04-27

  • 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    ECharts地图主要用于地理区域数据的可视化，展示不同区域的数据分布信息，通过本文给大家介绍如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据，需要的朋友参考下吧...2016-02-26

  • JQuery异步提交表单与文件上传功能示例

    这篇文章主要介绍了JQuery异步提交表单与文件上传功能,结合实例形式分析了jQuery表单提交及文件传输操作的相关实现技巧,需要的朋友可以参考下...2017-01-16

  • 使用jQuery ajaxupload插件实现无刷新上传文件

    项目中会经常用到AJAX无刷新上传图片，但是iframe上传和flash插件都是比较复杂的，所以就找了一个jquery的插件。下面通过实例代码给大家介绍使用jQuery ajaxupload插件实现无刷新上传文件功能，需要的朋友参考下吧...2017-04-27

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

    这篇文章主要介绍了又拍云异步上传实例教程详解的相关资料,需要的朋友可以参考下...2016-04-23

  • WordPress后台中实现图片上传功能的实例讲解

    这篇文章主要介绍了WordPress后台中实现图片上传功能的实例讲解,包括多个图片上传表单功能的实现,需要的朋友可以参考下...2016-01-14

  • 深入浅析NodeJs并发异步的回调处理

    这篇文章主要介绍了NodeJs并发异步的回调处理的相关资料,需要的朋友可以参考下...2015-12-24

  • jquery Form轻松实现文件上传

    这篇文章主要介绍了jquery Form轻松实现文件上传的相关过程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-27

  • Yii2.0中使用js异步删除示例

    本篇文章主要介绍了Yii2.0中使用js异步删除示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-03-12

  • JS实现异步上传压缩图片

    这篇文章主要为大家详细介绍了JS实现异步上传压缩图片，并立即显示图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-04-27

  • php实现异步将远程链接上内容(图片或内容)写到本地的方法

    这篇文章主要介绍了php实现异步将远程链接上内容(图片或内容)写到本地的方法,涉及php基于curl进行远程文件传输的相关操作技巧,需要的朋友可以参考下...2016-12-02

  • Javascript使用uploadify来实现多文件上传

    本篇文章主要介绍了Javascript使用uploadify来实现多文件上传，具有一定的参考价值，有需要的可以了解一下。 ...2016-11-22

  • PHP实现文件上传下载实例

    这篇文章主要介绍了PHP实现文件上传下载实例,本文详细全面的讲解了文件上传相关的需求分析及功能实现,并同时给出了使用代码,需要的朋友可以参考下。 PHP实现文件上传与下载...2016-10-20

  • JQuery Ajax 异步操作之动态添加节点功能

    异步操作动态添加节点，导致在代码中给添加的节点全局绑定事件或者获取元素无效，问题出在哪里呢？下文给大家介绍下，感兴趣的朋友参考下吧...2017-05-27

  • H5图片压缩与上传实例

    这篇文章主要为大家详细介绍了H5图片压缩与上传的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-04-27

  • jquery实现上传文件大小类型的验证例子(推荐)

    下面小编就为大家带来一篇jquery实现上传文件大小类型的验证例子(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随想过来看看吧...2016-07-01

  • AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧...2017-01-23