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


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 if 想到的些问题
Mar 22 PHP
PHP文件操作实现代码分享
Sep 01 PHP
一个不易被发现的PHP后门代码解析
Jul 05 PHP
thinkphp中html:list标签传递多个参数实例
Oct 30 PHP
thinkphp模板输出技巧汇总
Nov 24 PHP
win7系统配置php+Apache+mysql环境的方法
Aug 21 PHP
php二维码生成
Oct 19 PHP
PHP 中提示undefined index如何解决(多种方法)
Mar 16 PHP
基于php判断客户端类型
Oct 14 PHP
PHP编程实现的TCP服务端和客户端功能示例
Apr 13 PHP
php判断数组是否为空的实例方法
May 10 PHP
php并发加锁问题分析与设计代码实例讲解
Feb 26 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
python的即时标记项目练习笔记
2014/09/18 Python
python单例模式实例分析
2015/04/08 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
管理心得体会
2013/12/28 职场文书
工作鉴定评语
2014/05/04 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
三八妇女节慰问信
2015/02/14 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
python识别围棋定位棋盘位置
2021/07/26 Python
零基础学java之循环语句的使用
2022/04/10 Java/Android