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


Posted in Javascript onDecember 01, 2014

论坛或者贴吧经常会需要分享很多图片,上传图片比较差的做法是上传到中央服务器上,中央服务器再转发给静态图片服务器。而这篇文章讲介绍如何使用plupload对上传过程进行优化,并绕过服务器直接批量上传图片到又拍云上的方法。本文集中会讲到以下几个重点:

plupload库

图片的本地压缩

多选图片

绕过服务器直接批量上传图片到又拍云

使用又拍的HTTP FORM API

plupload的配置

plupload库

plupload是一个支持非常丰富的图片上传插件。可以对低版本的浏览器通过Flash/Silverligh/html4支持批量上传,而在高版本浏览器中则会优先使用html5接口上传,这一切的判定都是自动的,可以说使用起来非常方便!其次plupload还支持在客户端压缩图片、直接Drag&Drop来上传等功能,具体大家就可以到它的官网上了解更多的信息。

在这里我们仅使用它的核心API,只需要引入一个文件即可。

<script src="lib/plupload-2.1.2/js/plupload.full.min.js"></script>

官方给出的核心API例子非常简单,可以直接移步http://www.plupload.com/examples/core查看。核心API在理解上不存在什么困难,如果需要帮助可以在本文后面向我提问。

图片的本地压缩

一般在网页中浏览的图片质量需求不高,记得当初高中上课学PS,老师说网上的图片分辨率设72就好了,打印的图片的话得设300。所以用户在上传一张很大的照片时,比较好的做法是现在用户的客户端本地压缩好这张图片,并把压缩后较小的图片上传,既不影响浏览效果,同时也能加快上传速度,减小服务器的负担。

图片的本地压缩功能在plupload中是支持的,只要在初始化它的时候传入一个resize参数就好了。其中,宽度和高度可以根据实际情况设置,而quality是比较重要的一个参数,顾名思义,这个值设置得越小,图片越小,但显示的质量也会越差,这个就需要你自己权衡一下啦。

{

    "resize": {

        "width": 200,

        "height": 200,

        "quality": 70

    }

}

多选图片

批量上传图片的一个前置条件就是能够多选图片。多选文件是HTML5的一个标准特性,我们可以通过如下方式来开启多选模式:

<form action="xxx">

  Select images: <input type="file" name="img" multiple> <!-- multiple 在这儿是关键!-->

  <input type="submit">

</form>

根据一个非常优秀的jquery插件jQuery-File-Upload的浏览器支持中Multiple File selection这个小节所写的那样,IE一直发展到IE10才刚开始支持这个HTML5的特性,那么我们又不得不借助Flash神奇的力量来对低版本浏览器进行多选图片的支持。幸运的是plupload已经帮我们做到了这一点,而且这一开关是默认开启的。如果你觉得你不需要用到多选图片,你可以设置multi_selection: false来关闭这个特性。

绕过服务器直接批量上传图片到又拍云

又拍云提供了HTTP FORM API。通过这个接口,我们就可以直接从浏览器端发起上传图片的请求,而不需要通过我们自己的服务器进行中转,大大降低了开销。

使用又拍的HTTP FORM API

使用这个接口,就需要向又拍云发送一个表单。这个表单包含你所要上传的文件,并且还需要包含policy和signature。Policy用于将上传请求相关的参数,例如保存路径,文件类型,预处理结果等,另外,也包含了上传请求授时间等。而Signature用于安全校验。

为了演示方便,此处直接使用javascript来生成Policy和Signature。但在实际使用中,为了安全性考虑,请在服务器端完成这个过程。下面的代码在官方的demo基础上做了些许修改,主要是使用了官方的测试帐号,关于这两个参数的具体生成方法,请参考官方的文档:http://docs.upyun.com/api/form_api/。

var options = {

    'bucket': 'demonstration',

    'save-key': '/test/filename.txt',

    'expiration': Math.floor(new Date().getTime() / 1000) + 86400

};

// 查看更多参数:http://docs.upyun.com/api/form_api/#表单API接口简介

var policy = window.btoa(JSON.stringify(options));

// 从 UPYUN 用户管理后台获取表单 API

var form_api_secret = '1+JY2ZqD5UVfw6hQ8EesYQO50Wo=';

// 计算签名

var signature = md5(policy + '&' + form_api_secret);

plupload的配置

如何使得plupload可以配合又拍云的HTTP FORM API,着实让我头疼了一番。在查看plupload的文档中,无意中的发现却让我看到了曙光,Upload to Amazon S3这个链接吸引了我。Amazon S3的全称是Amazon Simple Storage Service,它提供的云存储服务多多少少和又拍云有些相似。

于是根据这篇文章中关于浏览器端配置的介绍,我琢磨出了上传到又拍云所需要的配置。其实说起来也很简单,主要就是对url和multipart_params两个参数进行配置。下面的例子中的options.bucket、policy和signature直接使用上一节计算出来的值。

var uploader = new plupload.Uploader({

    ...

    url : 'http://v0.api.upyun.com/' + options.bucket,

    multipart_params: {

        'Filename': '${filename}', // adding this to keep consistency across the runtimes

        'Content-Type': '',

        'policy': policy,

        'signature': signature,

    },

    ...

});

总结

如此这般,终于实现了通过plupload绕过服务器,向又拍云批量上传图片了。plupload真是一个很强大的库,不过它对商业使用可以需要收费的哦,具体还是到它的官网上去了解吧!

是不是很简单呢,主要是思路很不错,值得我们去学习,有问题请跟我留言,大家共同进步

Javascript 相关文章推荐
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
关于javascript模块加载技术的一些思考
Nov 28 #Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 #Javascript
关于编写性能高效的javascript事件的技术
Nov 28 #Javascript
推荐25个超炫的jQuery网格插件
Nov 28 #Javascript
实例分析javascript中的call()和apply()方法
Nov 28 #Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 #Javascript
jquery+php实现搜索框自动提示
Nov 28 #Javascript
You might like
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python中实现常量(Const)功能
2015/01/28 Python
Python创建xml的方法
2015/03/10 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
python匿名函数用法实例分析
2019/08/03 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
Python面向对象实现方法总结
2020/08/12 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
教师简历自我评价
2014/02/03 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
宿舍标语大全
2014/06/19 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS