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

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

赞 (0)

相关推荐

  • 使用JS+plupload直接批量上传图片到又拍云

    论坛或者贴吧经常会需要分享很多图片,上传图片比较差的做法是上传到中央服务器上,中央服务器再转发给静态图片服务器.而这篇文章讲介绍如何使用plupload对上传过程进行优化,并绕过服务器直接批量上传图片到又拍云上的方法.本文集中会讲到以下几个重点: 复制代码 代码如下: plupload库 图片的本地压缩 多选图片 绕过服务器直接批量上传图片到又拍云 使用又拍的HTTP FORM API plupload的配置 plupload库 plupload是一个支持非常丰富的图片上传插件.可以对低版本的浏

  • 又拍云存储同步脚本

    本blog使用的服务器是AWS EC2,选用节点位于日本,所以访问速度只能说凑合.前段时间把网站上的css.js以及图片等静态资源放在又拍云存储上,访问速度明显提高不少.由于网站没有备案,所以不能使用自己的域名来直接访问又拍云存储上的内容,只能通过又拍云存储的三级域名来访问. 实现大致步骤如下: 1.注册并激活又拍云账号: 2.登入后在"操作员管理"中添加一个账号,账号在ftp中会使用到: 3."空间管理"中创建一个空间,注意最好是选择"文件类空间&quo

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

    网站静态文件存储在又拍云,之前上传是通过又拍云的的FORM API进行. 当产品经理歪着脑袋走向你的时候,哎呀呀,这用户信息这里,上传要无刷新的效果了. 这他***,自己偷偷抱怨一会会,怎么搞喃?听说这家伙要一个好听的名字,异步上传,高大上档次挺像我的. 根据我们的观察,此处有两个重点: ①.怎么实现异步上传 ②.怎么上传到又 拍 云 首先我们要实现异步上传,就需要利用js里面的FormData对象,据说,这家伙不支持ie6 7的,ie8就不太清楚了,据说哈,说错了不负责的. 不过喃,我们也不用

  • jquery ajaxfileupload异步上传插件使用详解

    由于项目需求在上传头像是需要使用异步上传文件,在上传的过程中需要对文件进行校验:规则如下:宽度和高 度大于200,宽高比要小于2,大小小于2M. 我这里使用的是AjaxFileUploader这个组件,服务器使用Struts处理文件. 实例: <form action="" id="imageForm" enctype="multipart/form-data" method="POST"> <input t

  • Springboot集成阿里云OSS上传文件系统教程

    Springboot集成阿里云OSS上传文件系统教程

    第一步:开通阿里云OSS服务,创建Bucket,获取id和密钥 第二步:根据官方文档编写上传代码 1.新建maven项目 添加依赖: <!-- 阿里云oss依赖 --> <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> </dependency> <!-- 日期工具栏依赖 --> <

  • 搭建nextcloud私有云存储网盘的教程详解

    Nextcloud是一款开源免费的私有云存储网盘项目,可以让你快速便捷地搭建一套属于自己或团队的云同步网盘,从而实现跨平台跨设备文件同步.共享.版本控制.团队协作等功能.它的客户端覆盖了Windows.Mac.Android.iOS.Linux 等各种平台,也提供了网页端以及 WebDAV接口,所以你几乎可以在各种设备上方便地访问你的云盘. 简介: 搭建个人云存储一般会想到ownCloud,堪称是自建云存储服务的经典.而Nextcloud是ownCloud原开发团队打造的号称是"下一代"

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

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

  • Vue+Koa2 打包后进行线上部署的教程详解

    最近使用Vue和Koa2重构了自己的博客,过程中踩了不少坑,查了很多资料,最后总算成功上线.之后我计划围绕这个过程写一系列文章,讲讲如何用Vue+Koa2写一套网站. 而现在,先来讲讲最后一步,在写完Vue和Koa2后,如何将它们部署到线上. 1.将Vue和Koa2结合 很多人在打完包后就不知道怎么做了,毕竟后面都是后端的事情.如果你用的是Vue-cli3.0,那么打包这一步会非常简单,只需要执行一条命令即可,其它的不用关心: npm run build 之后会生成一个dist的文件夹,将它放到

  • SpringBoot整合MinIO实现文件上传的方法详解

    SpringBoot整合MinIO实现文件上传的方法详解

    目录 前言 1. MinIO 简介 2. MinIO 安装 3. 整合 Spring Boot 4. 配置nginx 5. 小结 前言 现在 OSS 服务算是一个基础服务了,很多云服务厂商都有提供这样的服务,价格也不贵,松哥自己的网站用的就是类似的服务. 不过对于中小公司来说,除了购买 OSS 服务之外,也可以自己搭建专业的文件服务器,自己搭建专门的文件服务器的话,曾经比较专业的做法是 FastDFS,松哥之前也专门为之录过视频发在 B 站上,感兴趣的小伙伴可以自行查看.不过 FastDFS 搭

  • Spring实现文件上传的配置详解

    Spring实现文件上传的配置详解

    添加依赖 主要用来解析request请求流,获取文件字段名.上传文件名.content-type.headers等内容组装成FileItem <!--添加fileupload依赖--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</versio

  • MySQL事务与锁实例教程详解

    MySQL事务与锁实例教程详解

    目录 MySQL事务和锁 事务 事务的控制语句 事务隔离级别设置 脏读 不可重复读 幻读 锁机制 InnoDB的行级锁 锁实战 死锁 总结 MySQL事务和锁 事务 说到关系型的数据库的事务,相信大家对四大特性都不陌生,分别是原子性.一致性.隔离性.持久性,简称为ACID特性. MySQL中支持3种不同的存储引擎: MyISAM存储引擎.Memory存储引擎.和InnoDB存储引擎 注:只有InnoDB才支持事务. 事务的控制语句 控制语句 作用 begin或者start transaction

  • SpringBoot实现项目文件上传的方法详解

    目录 一.首先抛出问题 二.解决思路 三.直接看源码就懂了,下面是controller 四.结尾 一.首先抛出问题 以阿里云oss文件上传为例,假设我的需求是这样的,我需要发布一条动态,这条动态呢可以是图片.语音.视频,3种类型,每种类型的上传我必须要限制它的文件大小,超过了我就不能让他上传的.如果传统的方式,那就是创建3个上传类型bucket对应图片.语音和视频,其实这种做法是可以的,但是怎么说呢,还不够优雅,如果当这个动态有越来越多种类型,你是不是要建立N个类型对应呢,所以就会使得bucke

随机推荐