使用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 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
js点击选择文本的方法
Feb 09 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
react 组件传值的三种方法
Jun 03 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
关于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 zend解密软件绿色版测试可用
2008/04/14 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
python 实现多维数组转向量
2019/11/30 Python
python设置环境变量的作用整理
2020/02/17 Python
keras的三种模型实现与区别说明
2020/07/03 Python
Python如何给函数库增加日志功能
2020/08/04 Python
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
采购员的工作职责
2013/12/26 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
党支部培养考察意见
2015/06/02 职场文书
行政复议答复书
2015/07/01 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书