JustYeh的前端博客

文件上传插件webuploder的使用

2019-07-02

插件文件上传

经常在项目中遇到文件上传的需求,进过多次的实践,证明这个上传插件确实不错,通过这篇文章会你可以详细的了解webuploader

在线demo

关于webuploader

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。

采用大文件分片并发上传,极大的提高了文件上传效率

官网地址:http://fex.baidu.com/webuploader/

在官网上你可以找到关于webuploader的详细的文档

使用技巧

下面是我在使用过程中我经常遇到一些问题和需求,整理了一下。

文件限制

webuploader有一个accept参数可以限制上传文件的格式

只允许图片

accept: {
    title: 'Images',
    extensions: 'gif,jpg,jpeg,bmp,png',
    mimeTypes: 'image/*'
}

只允许压缩文件

accept: {
title: 'Applications',
extensions: 'zip,rar,7z',
mimeTypes: 'application/*,image/*'
}

以下三个参数可以限制文件的大小

fileNumLimit:3, //文件上传数量的限制
duplicate:true, //是否允许重复的文件
fileSingleSizeLimit:10 * 1024 * 1024, //单个文件大小限制

如果出错,会触发error事件

uploader.on("error",function (type){ 
if (type=="Q_TYPE_DENIED"){
alert("文件格式错误")
}
if(type=="F_EXCEED_SIZE"){
alert("文件大小超过限制");
}
})

有时,文件的格式比较特殊,我们可以这样做

//进入队列时判断文件类型
uploader.on('fileQueued', function(file) {
if(file.ext == "xls" || file.ext == "xlsx"){
//do somethig
}else{
alert("文件格式错误");
uploader.reset();////重置uploader
}
});
上传之前动态绑定参数

在上传时,有时会需要动态的绑定一些数据,可以这样做

uploader.on( 'uploadBeforeSend', function( block, data ) {
 data.user_id = 12233;
 data.user_name = 'justyeh';
});
多元素共用一个picker

有这样一中情况,页面中有两个按钮button.picker,他们公用一个webuploader实例

<button class="picker">上传按钮一</button>
<button class="picker">上传按钮二</button>
uploader = WebUploader.create({
......
pick:  {
id:".picker",
}
......
});

现在需要知道是哪个按钮触发了上传事件,我们可以这样做

//上传成功
uploader.on('uploadSuccess', function(file,response) {
var _picker = $(file.source._refer);//_refer记录来源
});
display:none时webuploader没有作用

picker元素默认是影藏的,我们可以换一种方式来“影藏”元素

clip: rect(1px,1px,1px,1px);

uploader在弹出层中,当弹出层显示之后再实例化

$("#.dialog").fadeIN(function(){
uploderObj =  WebUploder.create(.........//创建
})