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


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 相关文章推荐
phpMyAdmin2.11.6安装配置方法
Aug 24 PHP
有关JSON以及JSON在PHP中的应用
Apr 09 PHP
配置php网页显示各种语法错误
Sep 23 PHP
linux实现php定时执行cron任务详解
Dec 24 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
Sep 06 PHP
用PHP代码在网页上生成图片
Jul 01 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
May 20 PHP
PHP 芝麻信用接入的注意事项
Dec 01 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
Oct 16 PHP
PHP的mysqli_stat()函数讲解
Jan 23 PHP
浅谈laravel框架sql中groupBy之后排序的问题
Oct 17 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
Mar 09 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
node.js实现快速截图
2016/08/27 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
python实现的各种排序算法代码
2013/03/04 Python
跟老齐学Python之模块的加载
2014/10/24 Python
解读python如何实现决策树算法
2018/10/11 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
Django工程的分层结构详解
2019/07/18 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
机关党建工作汇报材料
2014/08/20 职场文书
2014年化验员工作总结
2014/11/18 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
会计专业自荐信范文
2019/05/22 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers