使用Web Uploader实现多文件上传
引入资源
使用WebUploader文件上传需要引入三种资源：JS,CSS,SWF。
<!--引入CSS--> <linkrel="stylesheet"type="text/css"href="webuploader文件夹/webuploader.css"> <!--引入JS--> <scripttype="text/javascript"src="webuploader文件夹/webuploader.js"> </script> <!--SWF在初始化的时候指定，在后面将展示-->
文件上传
WebUploader只包含文件上传的底层实现，不包括UI部分。所以交互方面可以自由发挥，以下将演示如何去实现一个简单的版本。
请点击下面的选择文件按钮，然后点击开始上传体验此Demo。
Html部分
首先准备dom结构，包含存放文件信息的容器、选择按钮和上传按钮三个部分。
<divid="uploader"class="wu-example"> <!--用来存放文件信息--> <divid="thelist"class="uploader-list"> </div> <divclass="btns"> <divid="picker">选择文件</div> <buttonid="ctlBtn"class="btnbtn-default">开始上传</button> </div> </div>
初始化WebUploader
具体说明，请看一下代码中的注释部分。
varuploader=WebUploader.create({
//swf文件路径swf:BASE_URL+'/js/Uploader.swf',
//文件接收服务端。
server:'http://webuploader.duapp.com/server/fileupload.php',
//选择文件的按钮。
可选。
//内部根据当前运行是创建，可能是input元素，也可能是flash.pick:'#picker',
//不压缩image,默认如果是jpeg，文件上传前会压缩一把再上传！
resize:false});
显示用户选择
由于webuploader不处理UI逻辑，所以需要去监听fileQueued事件来实现。
//当有文件被添加进队列的时候uploader.on('fileQueued',function(file)
{$list.append('<divid="'+file.id+'"class="item">'+'<h4class="info">'+file.name+'</h4>'+'<pclass="state">等待上传...</p>'+'</div>');});
文件上传进度
文件上传中，WebUploader会对外派送uploadProgress事件，其中包含文件对象和该文件当前上传进度。
//文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress',function(file,percentage)
{var$li=$('#'+file.id),$percent=$li.find('.progress.progress-bar');
//避免重复创建if(!$percent.length)
{$percent=$('<divclass="progressprogress-stripedactive">'+'<divclass="progress-bar"role="progressbar"style="width:0%">'+'</div>'+'</div>').appendTo($li).find('.progress-bar');}$li.find('p.state').text('上传中');$percent.css('width',percentage*100+'%');});
文件成功、失败处理
文件上传失败会派送uploadError事件，成功则派送uploadSuccess事件。不管成功或者失败，在文件上传完后都会触发uploadComplete事件。
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();
});
图片上传
与普通文件上传相比，此demo演示了：文件过滤，图片预览，图片压缩上传等功能。
Html
要实现如上demo，首先需要准备一个按钮，和一个用来存放添加的文件信息列表的容器。
<!--dom结构部分--> <divid="uploader-demo"> <!--用来存放item--> <divid="fileList"class="uploader-list"> </div><divid="filePicker">选择图片</div> </div>
Javascript
创建WebUploader实例
//初始化WebUploadervaruploader=WebUploader.create({//选完文件后，是否自动上传。
auto:true,//swf文件路径swf:BASE_URL+'/js/Uploader.swf',//文件接收服务端。
server:'http://webuploader.duapp.com/server/fileupload.php',//选择文件的按钮。
可选。
//内部根据当前运行是创建，可能是input元素，也可能是flash.pick:'#filePicker',//只允许选择图片文件。
accept:{title:'Images',extensions:'gif,jpg,jpeg,bmp,png',mimeTypes:'image/*'}});
监听fileQueued事件，通过uploader.makeThumb来创建图片预览图。
PS:这里得到的是DataURL数据，IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。
//当有文件添加进来的时候uploader.on('fileQueued',function(file)
{var$li=$('<divid="'+file.id+'"class="file-itemthumbnail">'+'<img>'+'<divclass="info">'+file.name+'</div>'+'</div>'),
$img=$li.find('img');//$list为容器jQuery实例$list.append($li);//创建缩略图//如果为非图片文件，可以不用调用此方法。
//thumbnailWidthxthumbnailHeight为100x100uploader.makeThumb(file,function(error,src)
{
if(error)
{
$img.replaceWith('<span>不能预览</span>');return;
}$img.attr('src',src);},thumbnailWidth,thumbnailHeight);});
然后剩下的就是上传状态提示了，当文件上传过程中,上传成功，上传失败，上传完成都分别对应uploadProgress,uploadSuccess,uploadError,uploadComplete事件。
//文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress',function(file,percentage)
{var$li=$('#'+file.id),$percent=$li.find('.progressspan');//避免重复创建
if(!$percent.length)
{$percent=$('<pclass="progress"><span></span></p>').appendTo($li).find('span');
}
$percent.css('width',percentage*100+'%');});//文件上传成功，给item添加成功class,用样式标记上传成功。
uploader.on('uploadSuccess',function(file)
{$('#'+file.id).addClass('upload-state-done');});//文件上传失败，显示上传出错。
uploader.on('uploadError',function(file)
{var$li=$('#'+file.id),$error=$li.find('div.error');//避免重复创建if(!$error.length)
{$error=$('<divclass="error"></div>').appendTo($li);
}$error.text('上传失败');});
//完成上传完了，成功或者失败，先删除进度条。
uploader.on('uploadComplete',function(file)
{$('#'+file.id).find('.progress').remove();});
以上所述是小编给大家介绍的使用WebUploader实现多文件上传的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！