示例代码：使用WebUploader实现多个上传组件
WebUploader是一个开源的用于文件上传的JavaScript库，它提供了多个上传组件示例代码。以下是一个简单的示例： 1. 首先，引入WebUploader的CSS和JS文件： ```html ``` 2. 创建一个HTML元素用于显示文件列表： ```html
``` 3. 初始化WebUploader实例： ```javascript var uploader = WebUploader.create({ // 自动上传。 auto: true, // swf<scriptsrc="~/Scripts/jquery-1.9.1.min.js"></script><linkhref="~/Scripts/1/bootstrap.css"rel="stylesheet"/><linkhref="~/Scripts/1/webuploader.css"rel="stylesheet"/><scriptsrc="~/Scripts/1/webuploader.js"></script><scriptsrc="~/Scripts/1/bootstrap.min.js"></script><scriptsrc="~/Scripts/1/webuploader.js"></script><divid="uploader"class="wu-example"><!--用来存放文件信息--><divid="thelist"class="uploader-list"></div><divclass="btns"><divid="picker0"data-ids="picker">文件上传</div><divid="picker1"style="display:none">选择文件</div></div></div><spanstyle="font-size:14px;"><scripttype="text/javascript">$(function(){varuploader;Size=0;uploader=aa("0");});functionaa(i){/*initwebuploader*/$list=$("#thelist");uploader=WebUploader.create({auto:true,//swf文件路径swf:'/Scripts/1/Uploader.swf',//文件接收服务端。server:'/Home/UpLoadProcess/',//选择文件的按钮。可选。//内部根据当前运行是创建，可能是input元素，也可能是flash.pick:{id:'#picker'+i,//只能选择一个文件上传//multiple:false},fileSingleSizeLimit:100*1024*1024,//设定单个文件大小//限制只能上传一个文件//fileNumLimit:1,//不压缩image,默认如果是jpeg，文件上传前会压缩一把再上传！resize:false,chunked:true,//分片上传-大文件的时候分片上传，默认falsechunkSize:500*1024,})//当有文件被添加进队列的时候uploader.on('fileQueued',function(file){//判断当前上传文件的格式if(uploader.getFiles()[uploader.getFiles().length-1].ext.toLowerCase()!="docx"&&uploader.getFiles()[uploader.getFiles().length-1].ext.toLowerCase()!="doc"&&uploader.getFiles()[uploader.getFiles().length-1].ext.toLowerCase()!="xlsx"&&uploader.getFiles()[uploader.getFiles().length-1].ext.toLowerCase()!="xls"&&uploader.getFiles()[uploader.getFiles().length-1].ext.toLowerCase()!="pptx"&&uploader.getFiles()[uploader.getFiles().length-1].ext.toLowerCase()!="ppt"&&uploader.getFiles()[uploader.getFiles().length-1].ext.toLowerCase()!="mp4"&&uploader.getFiles()[uploader.getFiles().length-1].ext.toLowerCase()!="swf"&&uploader.getFiles()[uploader.getFiles().length-1].ext.toLowerCase()!="pdf"&&uploader.getFiles()[uploader.getFiles().length-1].ext.toLowerCase()!="jpg"&&uploader.getFiles()[uploader.getFiles().length-1].ext.toLowerCase()!="png"){alert("上传格式不正确！");}else{var$li=$('#WU_FILE_'+i),$percent=$li.find('.info');if(!$percent.length){$list.append('<divid="WU_FILE_'+i+'"class="item">'+'<h4class="info">'+file.name+'</h4>'+'<pclass="state">等待上传...</p>'+'<spanid="iid'+i+'"></span><spanid="all'+i+'"></span></div>');}else{var$lii=$('#WU_FILE_'+i);//修改已上传的$lii.html('<divid="WU_FILE_'+i+'"class="item">'+'<h4class="info">'+file.name+'</h4>'+'<pclass="state">等待上传...</p>'+'<spanid="iid'+i+'"></span><spanid="all'+i+'"></span></div>');}}});//文件上传过程中创建进度条实时显示。uploader.on('uploadProgress',function(file,percentage){$li=$('#WU_FILE_'+i),$percent=$li.find('.progress.progress-bar');//避免重复创建---进度条if(!$percent.length){$percent=$('<divclass="progressctive">'+'<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+'%');//进度条//上传期间所上传占总的比例varnowSize=0;//已上传大小vargb=Math.pow(1024,3);varmb=Math.pow(1024,2);varkb=1024;varfileSize=uploader.getFiles()[uploader.getFiles().length-1].size;//总大小if(fileSize>=gb){varfz=(fileSize/gb).toFixed(2);Size=fz+"GB";nowSize=(fz*percentage).toFixed(2)+"GB";}elseif(fileSize>=mb){varfz=(fileSize/mb).toFixed(2);Size=fz+"MB";nowSize=(fz*percentage).toFixed(2)+"MB";}elseif(fileSize>=kb){varfz=(fileSize/kb).toFixed(2);Size=fz+"KB";nowSize=(fz*percentage).toFixed(2)+"KB";}else{varfz=fileSize;Size=fz+"B";nowSize=fz*percentage+"B";}//variidSize=nowSize/Size;$("#iid"+i).html((percentage*100).toFixed(2)+"%");//已上传比例$("#all"+i).html("总大小："+Size);//总大小});uploader.on('uploadSuccess',function(file,response){//console.log(response._raw);$('#WU_FILE_'+i).find('p.state').text('已完成');//uploader.removeFile(file);//删除//uploader.reset();});uploader.on('uploadError',function(file){$('#WU_FILE_'+i).find('p.state').text('上传出错');});uploader.on('uploadComplete',function(file){//$('#'+file.id).find('.progress').fadeOut();//删除进度条});/***验证文件格式以及文件大小*/uploader.on("error",function(type){if(type=="F_EXCEED_SIZE"){alert("文件大小不能超过100M");}else{alert("上传出错！请检查后重新上传！错误代码"+type);}});returnuploader;}functionbbb(i){$("#picker1").show();uploader=aa(i);}</script></span>
