WebUploader文件上传插件

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

官方文档：http://fex.baidu.com/webuploader/doc/?qq-pf-to=pcqq.group

各个参数的说明文档中都有，可以详细参考一下文档，再这里给大家列出一个上传文件的实现，如有不足的地方希望大家指出，谢谢。

首先引如外部资源 css，js文件：

这里$不要管，这个只是spring项目中使用el表达式来写静态文件前缀了。使用的话，测试的话直接写死绝对路即可。

linkhref="${ctx}/css/plugins/webuploader/webuploader.css"rel="stylesheet">

scriptsrc="${ctx}/js/plugins/webuploader/webuploader.min.js">>

引入bootstrap的js

scriptsrc="${ctx}/js/plugins/bootstrap-table/bootstrap-table.js">>

接着写容器的DOM

divclass="form-horizontal">

divclass="form-group">

labelclass="col-sm-3control-label">选择文件>

divclass="col-sm-3">

labelid="picker">选择文件>

div>

divclass="col-sm-6">

inputid="uploadBtn"type="button"value="上传文件"

class="btnbtn-success"/>

inputid="fileName"type="hidden"name="fileName">

inputid="configPreName"type="hidden"name="configPreName"

value="tracingUpload">

buttonid="clearBtn"class="btnbtn-warning"type="button">清空上传文件

button>

div>

div>

div>

divclass="form-horizontal">

divclass="form-group">

divclass="col-sm-3">>

divclass="col-sm-6">

divid="thelist"class="uploader-list">>

div>

div>

最后初始化webuploader组件，设置上传等事件监听。

/**

*上传文件方法

*/

functionuploadFiles() {

var$list=$('#thelist'),

$btn=$('#uploadBtn'),

$clearBtn=$('#clearBtn'),

state='pending';

varconfigPreName=$('#configPreName').val();

varuploader=WebUploader.create({

// swf文件路径

swf:'/js/plugins/webuploader/Uploader.swf',

//文件接收服务端。

server:'/documents/file/upload',

//选择文件的按钮。可选。

// 内部根据当前运行是创建，可能是input元素，也可能是flash.

pick:'#picker',

//不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！

resize:false,

//上传文件格式，可支持多种格式

accept: {

title:'Files',

extensions:'gif,jpg,jpeg,bmp,png,pdf,doc,docx,txt,xls,xlsx,ppt,pptx,zip,mp3,mp4,text,csv',

mimeTypes:'image/*,text/*'

//word

+',application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'

//excel

+',application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'

//ppt

+',application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation'

+',application/pdf'

+',application/zip'

+',application/csv'

}

});

//当有文件被添加进队列的时候

uploader.on('fileQueued',function(file) {

varfiles=uploader.getFiles();

for(vari=;ilength-1;i++) {

uploader.removeFile(files[i],true);

}

$list.html('');

$list.append('

+ file.id+'">'+

''+ file.name+''+

'

单击上传按钮开始上传...

'+

'

');

});

//文件上传过程中创建进度条实时显示。

uploader.on('uploadProgress',function(file, percentage) {

var$li=$('#'+ file.id),

$percent=$li.find('.progress .progress-bar');

//避免重复创建

if(!$percent.length) {

$percent=$('

'+

'

'+

'

'+

'

').appendTo($li).find('.progress-bar');

}

$li.find('p.state').text('上传中');

$percent.css('width', percentage *100+'%');

});

uploader.on('uploadSuccess',function(file, response) {

if(response.msgCode =='success') {

toastr.success("", response.message);

//后续显示处理，另行增加}

if(response.msgCode =='fail') {

toastr.warning("", response.message);

}

varfiles=uploader.getFiles();

for(vari=;ilength;i++) {

uploader.removeFile(files[i],true);

}

$list.html('');

});

uploader.on('uploadError',function(file) {

$('#'+ file.id).find('p.state').text('上传出错');

});

uploader.on('uploadComplete',function(file) {

$('#'+ file.id).find('.progress').fadeOut();

});

uploader.on('all',function(type) {

if(type ==='startUpload') {

state='uploading';

}else if(type ==='stopUpload') {

state='paused';

}else if(type ==='uploadFinished') {

state='done';

}

if(state==='uploading') {

$btn.text('暂停上传');

}else{

$btn.text('导入');

}

});

//上传

$btn.on('click',function() {

if(state==='uploading') {

uploader.stop();

}else{

uploader.upload();

}

});

//清空

$clearBtn.on('click',function() {

//alert(state);

varfiles=uploader.getFiles();

for(vari=;ilength;i++) {

uploader.removeFile(files[i],true);

}

$list.html('');

});

}