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

论坛或者贴吧经常会需要分享很多图片,上传图片比较差的做法是上传到中央服务器上,中央服务器再转发给静态图片服务器。而这篇文章讲介绍如何使用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真是一个很强大的库,不过它对商业使用可以需要收费的哦,具体还是到它的官网上去了解吧!

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

(0)

相关推荐

  • yii2.0使用Plupload实现带缩放功能的多图上传

    本文讲解了plupload的相关代码,实现了ajax多图同时上传,然后将图片进行缩放,最后显示图片,分享给大家供大家参考,具体内容如下 1.文章视图中调用Plupload <?= \common\widgets\Plupload::widget([ 'model'=>$model, 'attribute'=>'cover_img', 'url'=>'/file/upload',//处理文件上传控制器 ])?> 2.\common\widgets\Plupload 组件 <

  • 封装ThinkPHP的一个文件上传方法实例

    本文实例讲述了封装ThinkPHP的一个文件上传方法,分享给大家供大家参考.具体如下: 这阵子,对WBlog的上传功能作了优化.改进后的上传功能可以实现缩略图上传,图片上传,生成水印,文件上传,并且可以在后台对上传的附件进行大小(文件大小),类型(文件类型),水印(针对图片)的进行设置.此外还可以对上传的文件进行分类保存到相应的文件夹里,方便管理. 下面是对改进后的上传功能作简约的说明. 缩略图上传 先前的缩略图上传功能使用了KindEditor的上传组件,除非上传之前对图片进行缩略处理,不然上

  • thinkPHP5框架整合plupload实现图片批量上传功能的方法

    本文实例讲述了thinkPHP5框架整合plupload实现图片批量上传功能的方法.分享给大家供大家参考,具体如下: 在官网下载plupload http://http//www.plupload.com 或者点击此处本站下载. 这里我们使用的是pluploadQueue 在HTML页面引入相应的css和js,然后根据示例代码修改为自己的代码 <link rel="stylesheet" href="/assets/plupupload/css/jquery.plupl

  • thinkPHP3.2简单实现文件上传的方法

    本文实例讲述了thinkPHP3.2简单实现文件上传的方法.分享给大家供大家参考,具体如下: IndexController.class.php: <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { function index(){ $this->display(); } public function upload(){ $upload = new

  • thinkphp jquery实现图片上传和预览效果

    先上效果图: 那个file按钮样式先忽略 点击选择图片(浏览),随便选一张图片 js代码如下 //上传图片立即预览 function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value .lastIndexOf("."), imgFile.value.length); filextension = filextension.toLowerCase(); if ((filexte

  • PHP + plupload.js实现多图上传并显示进度条加删除实例代码

    PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no&qu

  • ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法

    本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl

  • 基于ThinkPHP5.0实现图片上传插件

    效果预览图: 该插件主要功能是:可预览裁剪图片和保存原图片,执行裁剪图片后会删除 裁剪的原图片目录,以便减少空间. 一.下载附件 地址:链接: https://pan.baidu.com/s/1nuQ4NgP  密码: 4pbu 二.将附件中的CropAvatar.php放到自己程序目录extend/org目录下,如果遇到 exif_imagetype 错误,需要打开 php.ini 中的 extension=php_exif.dll 三.common.php公共函数 找到应用程序目录下的com

  • ThinkPHP文件上传实例教程

    文件上传是很多PHP程序项目中常见的一个功能,今天本文就来分享一个完整的实例,来实现ThinkPHP文件上传的功能.具体方法如下: 一.action部分: FileAction.class.php页面代码如下: <?php class FileAction extends Action{ function index(){ $file=M('file'); $list=$file->select(); $this->assign('filelist',$list); $this->

  • Thinkphp多文件上传实现方法

    本文实例讲述了Thinkphp多文件上传实现方法,分享给大家供大家参考.具体实现方法如下: Thinkphp手册中对于多文件上传描述的很清楚:如果需要使用多个文件,只需要修改表单,把 复制代码 代码如下: <input type='file' name='photo'> 改为 复制代码 代码如下: <li><input type='file' name='photo1'></li> <li><input type='file' name='

  • thinkphp实现图片上传功能分享

    1.我们首先需要创建一个表 复制代码 代码如下: CREATE TABLE IF NOT EXISTS `tp_image` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `image` varchar(200) NOT NULL,  `create_time` int(11) NOT NULL,  PRIMARY KEY (`id`)) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 2.然后再conf文件里添加配置(最后一段配置

随机推荐