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


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 相关文章推荐
PHP+DBM的同学录程序(5)
Oct 09 PHP
linux下删除7天前日志的代码(php+shell)
Jan 02 PHP
php使用base64加密解密图片示例分享
Jan 20 PHP
PHP图片库imagemagick安装方法
Sep 23 PHP
codeigniter显示所有脚本执行时间的方法
Mar 21 PHP
PHP连接操作access数据库实例
Mar 30 PHP
PHP扩展框架之Yaf框架的安装与使用
May 18 PHP
PHP入门教程之面向对象基本概念实例分析
Sep 11 PHP
Laravel利用gulp如何构建前端资源详解
Jun 03 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
Aug 02 PHP
php文件上传原理与实现方法详解
Dec 20 PHP
php如何获取Http请求
Apr 30 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判断用户是否手机访问代码
2015/06/08 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
判断python字典中key是否存在的两种方法
2018/08/10 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
python关闭占用端口方式
2019/12/17 Python
详解Scrapy Redis入门实战
2020/11/18 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
应届生高等护理求职信
2013/10/12 职场文书
大学军训感言200字
2014/02/26 职场文书
环保公益广告语
2014/03/13 职场文书
个人作风建设总结
2014/10/23 职场文书
2014年环保局工作总结
2014/12/11 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
基于Python实现股票收益率分析
2022/04/02 Python
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers