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

网站静态文件存储在又拍云,之前上传是通过又拍云的的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文件上传实例详解、又拍云上传图片、又拍云 上传文件、又拍图片管家批量上传,以便于您获取更多的相关知识。

时间: 2024-08-30 10:46:55

又拍云异步上传实例教程详解_php实例的相关文章

Yii2 rbac权限控制之rule教程详解_php实例

在我们之前Yii2搭建后台并实现rbac权限控制完整实例教程中,不知道你曾经疑惑过没有一个问题,rule表是做什么的,为什么在整个过程中我们都没有涉及到这张表? 相信我不说,部分人也都会去尝试,或百度或google,到头来也会竹篮打水,这部分讲解的内容少之又少啊! 对于一般的权限系统而言,我们之前做的rbac一般情况下是足够的,即时没有rule,相信你也能实现我们用rule实现的功能. 我们就以官网的例子给出一个具体的操作教程,看看这个神秘的rule到底是做什么的! 看需求: 我们有管理员和普通

Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解_php实例

选择在PhpStorm集成apache服务器,下面是我自己的亲测的步骤. 1.如何修改apache默认端口 xampp apache默认的http访问端口是80 修改完成后在xampp中重启apache. 2.配置流程 打开Settings / Preferences 找到 Build, Execution, Deployment 选项,点击 Deployment 添加如下: 因为我们修改了默认端口80,所以这里一定要指明端口号.目录是/Applications/XAMPP/xamppfiles

yii2中结合gridview如何使用modal弹窗实例代码详解_php实例

在上篇文章给大家介绍了Yii2中如何使用modal弹窗(基本使用),即以创建为例. 实际开发中,我们往往还会遇到列表页数据修改要使用modal的情况,如果是一般的循环展示,相信大多数人看了modal的基本使用都会操作,但是结合gridview估计有些人就开始吃不消了,我们看看如何解决这个问题! 1.gridview的操作增加[更新]按钮,并指定data-toggle data-target class以及data-id的值 [ 'class' => 'yii\grid\ActionColumn'

Yii2中事务的使用实例代码详解_php实例

前言 一般我们做业务逻辑,都不会仅仅关联一个数据表,所以,会面临事务问题. 数据库事务(Database Transaction) ,是指作为单个逻辑工作单元执行的一系列操作,要么完全地执行,要么完全地不执行. 事务处理可以确保除非事务性单元内的所有操作都成功完成,否则不会永久更新面向数据的资源.通过将一组相关操作组合为一个要么全部成功要么全部失败的单元,可以简化错误恢复并使应用程序更加可靠.一个逻辑工作单元要成为事务,必须满足所谓的ACID(原子性.一致性.隔离性和持久性)属性.事务是数据库运

PHP7+Nginx的配置与安装教程详解_php实例

系统环境:centos6.5 x64 软件版本:nginx-1.10.0 php-7.0.6 安装 Nginx Nginx官网:http://nginx.org/ 先安装编译依赖的一些组件 复制代码 代码如下: yum install pcre pcre-devel openssl openssl-devel -y 1.解压程序包 复制代码 代码如下: tar xf nginx-1.10.0.tar.gz cd nginx-1.10.0 2.预编译配置参数 复制代码 代码如下: ./config

基于PHP异步执行的常用方式详解_php实例

1.客户端页面采用AJAX技术请求服务器优点:最简单,也最快,就是在返回给客户端的HTML代码中,嵌入AJAX调用,或者,嵌入一个img标签,src指向要执行的耗时脚本.缺点:一般来说Ajax都应该在onLoad以后触发,也就是说,用户点开页面后,就关闭,那就不会触发我们的后台脚本了.而使用img标签的话,这种方式不能称为严格意义上的异步执行.用户浏览器会长时间等待php脚本的执行完成,也就是用户浏览器的状态栏一直显示还在load.当然,还可以使用其他的类似原理的方法,比如script标签等等.

PHP Cookie的使用教程详解_php实例

1.设置CookiePHP用SetCookie函数来设置Cookie.必须注意的一点是:Cookie是HTTP协议头的一部分 ,用于浏览器和服务器之间传递信息,所以必须 在任何属于HTML文件本身的内容输出之前调用 Cookie函数.SetCookie函数定义了一个Cookie,并且把它附加在HTTP头的后面,SetCookie函数的原型如下: int SetCookie(string name, string value, int expire, string path, string dom

jQuery File Upload文件上传插件使用详解_jquery

jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示:支持各种动态语言开发的服务器端. 官网链接:https://github.com/blueimp/jQuery-File-Upload/wiki 特点:拖放支持:上传进度条:图像预览:可定制和可扩展的:兼容任何服务器端应用平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.). 使用方法:

Bootstrap Fileinput文件上传组件用法详解_javascript技巧

一.效果展示 1.原始的input type='file',简直不忍直视. 2.不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化) 3.bootstrap fileinput高级进化:中文化.可拖拽上传.文件扩展名校验(如果不是需要的文件,不让上传) 拖拽上传 上传中 4.bootstrap fileinput究极进化:允许同时多线程上传多个文件. 上传中 上传完成后 二.代码示例 怎么样?效果如何?不要急,我们一步一步来实现以上的效果. 1