百度文件上传插件WebUploader的使用

最近公司项目中需要开发一个文件批量上传的功能，对比了bootstrap的fileinput和layui自带的文件上传插件后，最终选择了百度文件上传插件WebUploader。这个插件最大的特点是UI可以自己定制，非常方便。

最终效果如下

具体使用步骤如下：

1.编写jsp页面，在页面中引入WebUploader的JS, CSS

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"/>
<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

 2.准备dom结构，包含存放文件信息的容器、选择按钮和上传按钮三个部分。

<div class="main-box-body clearfix" style="height:750px;">
    <div class="btns">
	<div id="picker">选择文件</div>
    </div>
    <div id="uploader" class="wu-example">
	<!--用来存放文件信息-->
	<div id="dndArea" >
	<p id="tip" style="color:red;font-size:18px;text-align:center;height:500px;line-height:500px">将文件拖拽到虚线框中,只能选择.mp3文件</p>
	    <div class="table-responsive">
            <table  id="c_table" style="display:none;" class="table table-striped table-hover">
		<thead>
		    <tr>
			<th class="text-center">文件名</th>
			<th class="text-center">大小</th>
			<th class="text-center">状态</th>
			<th class="text-center">操作</th>
		    </tr>
                </thead>
		<tbody id="thelist"></tbody>
	    </table>
	    </div>					    
	</div>
        <div class="btns">
	    <button id="ctlBtn" class="btn btn-danger">开始上传</button>
        </div>
    </div>
</div>

 3.在java script中创建Web Uploader实例，并初始化。注意引入了一个swf文件

<script>
    $(function(){
        $list = $('#thelist');
	var uploader = WebUploader.create({
	    accept:{
		title: 'Files',
		extensions: 'mp3',
		mimeTypes: 'audio/mpeg'
		},
	    // swf文件路径
	    swf: 'webuploader目录/Uploader.swf',
	
	    // 文件接收服务端的url
	    server: '***/***/5',
	
	    // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	    pick: '#picker',
	
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	    resize: false,
		    
	    // 开启拖拽
	    dnd:"#dndArea",
	    // 屏蔽拖拽区域外的响应
	    disableGlobalDnd:true,
    });

....
</script>

4.在java script中创建监听器

监听fileQueued事件，可以获取文件的一些基本信息，比如文件大小，文件名称，文件创建和修改日期等

文件上传过程中, 上传成功，上传失败，上传完成都分别对应uploadProgress, uploadSuccess, uploadError, uploadComplete事件。

uploader.on('fileQueued', function( file ) {
	$("#tip").hide();
	$("#c_table").show();
        var tr = $(['<tr id="' + file.id + '" class="item">'
	    ,'<td style="padding-left:10px" >'+ file.name +'</td>'
	    ,'<td class="text-center">'+ (file.size/1014).toFixed(1) +'kb</td>'
	    ,'<td class="text-center"><span class="state">等待上传</span><div class="progress progress-striped active"><div class="progress-bar" role="progressbar" style="width: 0%"></div></div></td>'
	    ,'<td class="text-center">'
	    , '<button class="btn btn-danger demo-delete" >删除</button>'
	    ,'</td>'
	    ,'</tr>'].join(''));
		    
	    //删除
	tr.find('.demo-delete').on('click', function(){
	    uploader.removeFile(file); //删除对应的文件
	    tr.remove();
	});
	
        $list.append(tr);
});
		
uploader.on( 'uploadProgress', function( file, percentage ) {
	var $tr =  $('#'+file.id ),
	tds = $tr.children(),
	$percent = tds.eq(2).find('.progress-bar');
	$tr.find('.demo-delete').attr('disabled', true);
	tds.eq(2).find("span.state").html('上传中:'+ Math.round(percentage*100) + '%');
	if(percentage == 1){
	    tds.eq(2).find("span.state").html('处理中...');
	}
	$percent.css( 'width', percentage * 100 + '%' );
});

uploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).find('span.state').text('已完成');
	var $tr =  $('#'+file.id );
	setTimeout(function() {
		uploader.removeFile(file); 
		$tr.remove();
	},2000);
});
	
uploader.on( 'uploadError', function( file ) {
	$( '#'+file.id ).find('span.state').text('上传出错');
});
	
uploader.on( 'uploadComplete', function( file ) {
	$( '#'+file.id ).find('.progress').fadeOut();
});

5.注意不要忘记触发上传

$('#ctlBtn').click(function(){
	uploader.upload();
});