var $list =$("#thelist" );
var $btn =$("#ctlBtn" );
var thumbnailWidth = 100 ;
var thumbnailHeight = 100 ;
var uploader = WebUploader.create({
auto: true ,
swf:'../js/Uploader.swf' ,
server: _url+'MutiUpFile/uploadMuti.action' ,
pick: '#picker' ,
resize: false
});
uploader.on( 'fileQueued' , function ( file ) {
$list .append( '<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'</div>' );
});
uploader.on( 'uploadProgress' , function ( file, percentage ) {
var $li = $( '#' +file.id ),
$percent = $li .find('.progress .progress-bar' );
if ( !$percent .length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>' ).appendTo( $li ).find('.progress-bar' );
}
$li .find('p.state' ).text('上传中' );
$percent .css( 'width' , percentage * 100 + '%' );
});
uploader.on( 'uploadSuccess' , function ( file ) {
$( '#' +file.id ).find('p.state' ).text('已上传' );
});
uploader.on( 'uploadError' , function ( file ) {
$( '#' +file.id ).find('p.state' ).text('上传出错' );
});
uploader.on( 'uploadComplete' , function ( file ) {
$( '#' +file.id ).find('.progress' ).fadeOut();
});
<div id ="uploader" class ="wu-example" >
<div id ="thelist" class ="uploader-list" > </div >
<div class ="btns" >
<div id ="picker" > 选择文件</div >
<button id ="ctlBtn" onclick ="startUp()" class ="btn btn-default" > 开始上传</button >
</div >
</div >