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

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

plupload库

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

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

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

图片的本地压缩

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

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

多选图片

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

根据一个非常优秀的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/。