JQueryajax实现批量上传图片.docVIP

JQuery+ajax实现批量上传图片 先看效果图 选择要上传的图片，效果图如下： 上传成功如下图： 前台html主要代码： button id=SubUpload class=ManagerButton onClick=TSubmitUploadImageFile ();return false;确定上传/buttonnbsp;nbsp; button id=CancelUpload class=ManagerButton onClick=javascript:history.go (-1);取消/buttonnbsp;nbsp; button id=AddUpload class=ManagerButton onClick=TAddFileUpload();return false;增加/button trtd class=tdClass ???????? 图片1： ???????? /tdtd class=tdClass ???????? input name= size=60 id=uploadImg1 type=file / ???????? span id=uploadImgState1/span ???????? /td/tr 因为用了JQuery，所以你完全可以把click事件放在js文件中 “增加”按钮js代码： var TfileUploadNum=1; //记录图片选择框个数 var Tnum=1; //ajax上传图片时索引 ???????? function TAddFileUpload() ???????? { ?????????????????? var idnum = TfileUploadNum+1; ?????????????????? var str=trtd class=tdClass图片+idnum+：/td; ?????????????????? str += td class=tdClassinput name= size=60 id=uploadImg+idnum+ type=file /span id=uploadImgState+idnum+; ?????????????????? str += /span/td/tr; ?????????????????? $(#imgTable).append(str); ?????????????????? TfileUploadNum += 1; ???????? } “确定上传”按钮js代码： function TSubmitUploadImageFile() ???????? { ????????????????? M(SubUpload).disabled=true; ?????????????????? M(CancelUpload).disabled=true; ?????????????????? M(AddUpload).disabled=true; ?????????????????? setTimeout(TajaxFileUpload(),1000);//此为关键代码 } 关于setTimeout(TajaxFileUpload(),1000);这句代码：因为所谓的批量上传，其实还是 一个一个的上传，给用户的只是一个假象。只所以要延时执行TajaxFileUpload()，是因为 在把图片上传到服务器上时，我在后台给图片重新命名了，命名的规则是，如下代码： Random rd = new Random(); StringBuilder serial = new StringBuilder(); serial.Append(DateTime.Now.ToString(yyyyMMddHHmmssff)); serial.Append(rd.Next(0, 999999).ToString()); return serial.ToString(); 即使我命名精确到毫秒，另外再加上随机数，可是还是有上传的第二张图片把上传的第一张 图片覆盖的情况出现。所以此处我设置了延时1秒后在上传下一张图片。刚开始做这个东西 的时候，用的是for循环，来把所有的图片一个一个的循环地用ajax上传，可是for循环速度 太快了，可能第一张图片还没来得及ajax，第二张就被for过来了，还是有第二张覆盖第一 张的情况出现。 下面来看TajaxFileUpload()函数，代码如下： function TajaxFileUpload() ???????? { ?????????????????? if(TnumTfileUploadNum+1) ?????????????????? { ??????????????????