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


Posted in PHP onApril 19, 2016

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

PHP 相关文章推荐
centos 5.6 升级php到5.3的方法
May 14 PHP
PHP调用Webservice实例代码
Jul 29 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
Jun 24 PHP
php使用PDO方法详解
Dec 27 PHP
php中JSON的使用与转换
Jan 14 PHP
php两种无限分类方法实例
Apr 21 PHP
php的socket编程详解
Nov 20 PHP
thinkPHP5.0框架API优化后的友好性分析
Mar 17 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
Apr 03 PHP
PHP实现QQ登录的开原理和实现过程
Feb 04 PHP
PHP7 mongoDB扩展使用的方法分享
May 02 PHP
PHP 计算两个时间段之间交集的天数示例
Oct 24 PHP
ThinkPHP中order()使用方法详解
Apr 19 #PHP
ThinkPHP中limit()使用方法详解
Apr 19 #PHP
ThinkPHP中where()使用方法详解
Apr 19 #PHP
yii2中的rules 自定义验证规则详解
Apr 19 #PHP
PHP序列化/对象注入漏洞分析
Apr 18 #PHP
php实现三级级联下拉框
Apr 17 #PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
Apr 17 #PHP
You might like
PHP书写格式详解(必看)
2016/05/23 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
javascript引用对象的方法
2007/01/11 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python实现备份目录的方法
2015/08/03 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
详解Django中间件执行顺序
2018/07/16 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
售后服务承诺书
2014/03/26 职场文书
员工保密承诺书
2014/05/28 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS