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

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

http://www.plupload.com/examples/core查看。核心API在理解上不存在什么困难，如果需要帮助可以在本文后面向我提问。

图片的本地压缩

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

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

http://docs.upyun.com/api/form_api/。

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真是一个很强大的库，不过它对商业使用可以需要收费的哦，具体还是到它的官网上去了解吧！

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

«
»

PHP教程

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类

快速导航

PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道