云图片的批量上传

Demo:http://zry656565.github.io/bulk-upload-to-UPYUN/

plupload库：

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

2. plupload.full.min.js

图片的本地压缩：

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

{
    "resize": {
        "width": 200,
        "height": 200,
        "quality": 70
    }
}

多选图片：

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

  Select images:  
  

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

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

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的配置：

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

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,
    },
    ...
});

转载 作者 邹润阳 所有