使用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 事件对象的实现
Jul 13 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
Html5生成验证码的示例代码
May 10 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
DedeCms模板安装/制作概述
2007/03/11 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
PHP加密技术的简单实现
2016/09/04 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
学习jquery之一
2007/04/27 Javascript
生成二维码方法汇总
2014/12/26 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
轮播的简单实现方法
2016/07/28 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python实现的各种排序算法代码
2013/03/04 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
python使用requests.session模拟登录
2019/08/09 Python
python模块导入的方法
2019/10/24 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
Python字符串及文本模式方法详解
2020/09/10 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
食品厂厂长岗位职责
2014/01/30 职场文书
大学校庆策划书
2014/01/31 职场文书
自我鉴定总结
2014/03/24 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
MySQL update set 和 and的区别
2021/05/08 MySQL