jquery组件WebUploader文件上传用法详解

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件,下文来为各位演示一下关于jquery WebUploader文件上传组件的用法。

使用WebUploader还可以批量上传文件、支持缩略图等等众多参数选项可设置，以及多个事件方法可调用，你可以随心所欲的定制你要的上传组件。

HTML

我们首先将css和相关js文件加载。

1. <link rel="stylesheet" type="text/css" href="css/webuploader.css">

2. <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

3. <script type="text/javascript" src="js/webuploader.min.js"></script>

然后我们需要准备一个按钮#imgPicker，和一个用来存放添加的文件信息列表的容器#fileList，在body中加入如下代码：

1. <div id="uploadimg">

2. <div id="fileList" class="uploader-list"></div>

3. <div id="imgPicker">选择图片</div>

4. </div>

JAVASCRIPT

首先创建Web Uploader实例：

uploader = WebUploader.create({
                swf: 'Uploader.swf',  //swf文件路径
                server: upload_auth_url,//文件接收服务器
                auto: true,            //文件选完后，是否自动上传
                fileNumLimit: 1,   //验证文件总数量, 超出则不允许加入队列
                pick: {
                    id: picker,
                    multiple: false
                },
                paste: document.body,
                /*accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'iamge/!*'
                },*/
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                   mimeTypes:'image/*,text/plain,application/msword,application/octet-stream,application/vnd.ms-excel,application/x-shockwave-flash'
                },
                prepareNextFile: true
            });

参数说明

• dnd {Selector} [可选] [默认值：undefined]

  指定Drag And Drop拖拽的容器，如果不指定，则不启动。

• disableGlobalDnd {Selector} [可选] [默认值：false]

  是否禁掉整个页面的拖拽功能，如果不禁用，图片拖进来的时候会默认被浏览器打开。

• paste {Selector} [可选] [默认值：undefined]

  指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.

• pick {Selector, Object} [可选] [默认值：undefined]

  指定选择文件的按钮容器，不指定则不创建按钮。

  • id {Seletor|dom} 指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 但是不是只支持 id, 还支持 class, 或者 dom 节点。
  • label {String} 请采用 innerHTML 代替
  • innerHTML {String} 指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
  • multiple {Boolean} 是否开起同时选择多个文件能力。
• accept {Arroy} [可选] [默认值：null]

  指定接受哪些类型的文件。 由于目前还有ext转mimeType表，所以这里需要分开指定。

  • title {String} 文字描述
  • extensions {String} 允许的文件后缀，不带点，多个用逗号分割。
  • mimeTypes {String} 多个用逗号分割。

• thumb {Object} [可选]

  配置生成缩略图的选项。

  默认为：

  1. {

  2. width: 110,

  3. height: 110,

  4.  

  5. // 图片质量，只有type为`image/jpeg`的时候才有效。

  6. quality: 70,

  7.  

  8. // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.

  9. allowMagnify: true,

  10.  

  11. // 是否允许裁剪。

  12. crop: true,

  13.  

  14. // 为空的话则保留原有图片格式。

  15. // 否则强制转换成指定的类型。

  16. type: 'image/jpeg'

  17. }

• compress {Object} [可选]

  配置压缩的图片的选项。如果此选项为false, 则图片在上传前不进行压缩。

  默认为：

  1. {

  2. width: 1600,

  3. height: 1600,

  4.  

  5. // 图片质量，只有type为`image/jpeg`的时候才有效。

  6. quality: 90,

  7.  

  8. // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.

  9. allowMagnify: false,

  10.  

  11. // 是否允许裁剪。

  12. crop: false,

  13.  

  14. // 是否保留头部meta信息。

  15. preserveHeaders: true,

  16.  

  17. // 如果发现压缩后文件大小比原来还大，则使用原来图片

  18. // 此属性可能会影响图片自动纠正功能

  19. noCompressIfLarger: false,

  20.  

  21. // 单位字节，如果图片大小小于此值，不会采用压缩。

  22. compressSize: 0

  23. }

• auto {Boolean} [可选] [默认值：false]

  设置为 true 后，不需要手动调用上传，有文件选择即开始上传。

• runtimeOrder {Object} [可选] [默认值：html5,flash]

  指定运行时启动顺序。默认会想尝试 html5 是否支持，如果支持则使用 html5, 否则则使用 flash.

  可以将此值设置成 flash，来强制使用 flash 运行时。

• prepareNextFile {Boolean} [可选] [默认值：false]

  是否允许在文件传输时提前把下一个文件准备好。对于一个文件的准备工作比较耗时，比如图片压缩，md5序列化。如果能提前在当前文件传输期处理，可以节省总体耗时。

• chunked {Boolean} [可选] [默认值：false]

  是否要分片处理大文件上传。

• chunkSize {Boolean} [可选] [默认值：5242880]

  如果要分片，分多大一片？ 默认大小为5M.

• chunkRetry {Boolean} [可选] [默认值：2]

  如果某个分片由于网络问题出错，允许自动重传多少次？

• threads {Boolean} [可选] [默认值：3]

  上传并发数。允许同时最大上传进程数。

• formData {Object} [可选] [默认值：{}]

  文件上传请求的参数表，每次发送都会发送此对象中的参数。

• fileVal {Object} [可选] [默认值：'file']

  设置文件上传域的name。

• method {Object} [可选] [默认值：'POST']

  文件上传方式，POST或者GET。

• sendAsBinary {Object} [可选] [默认值：false]

  是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容，其他参数在$_GET数组中。

• fileNumLimit {int} [可选] [默认值：undefined]

  验证文件总数量, 超出则不允许加入队列。

• fileSizeLimit {int} [可选] [默认值：undefined]

  验证文件总大小是否超出限制, 超出则不允许加入队列。

• fileSingleSizeLimit {int} [可选] [默认值：undefined]

  验证单个文件大小是否超出限制, 超出则不允许加入队列。

• duplicate {Boolean} [可选] [默认值：undefined]

  去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.

• disableWidgets {String, Array} [可选] [默认值：undefined]

  默认所有 Uploader.register 了的 widget 都会被加载，如果禁用某一部分，请通过此 option 指定黑名单。

接着监听fileQueued事件，即当有文件添加进来的时候，通过uploader.makeThumb来创建图片预览图。

//当文件上传成功时触发。
uploader.on("uploadSuccess", function(file, response){
            if ( response.status === '0' ) {
                layer.open({
                    content: response.info,
                    time: 2
                });
            } else if ( response.status === '1' ) {
                $list.append(    
                    '<div id="' + file.id + '" class="file-item">' +
                    '<img src="' + host_url+response.data + '" data-url="'+response.data+'">' +
                    '<span class="close-thumb">X</span>' +
                    '</div>'
                );
                $picker.append($list.clone(true));
                $list.empty();
                //$parentList.show();
                load = true;
                disabledFile();
            }
        });

// 创建缩略图 
 uploader.makeThumb( file, function( error, src ) { 
 if ( error ) { 
 $img.replaceWith('<span>不能预览</span>'); 
 return; 
 } 
 
 $img.attr( 'src', src ); 
 }, 100, 100 ); //100x100为缩略图尺寸 
});