《JQuery+ajax实现批量上传图片.docx》由会员分享，可在线阅读，更多相关《JQuery+ajax实现批量上传图片.docx（5页珍藏版）》请在三一办公上搜索。
1、JQuery+ajax实现批量上传图片先看效果图 点击增加按钮，会增加一个选择框，如下图： 选择要上传的图片，效果图如下： 上传成功如下图： 下面来看代码： 前台html主要代码： 确定上传 取消 增加 图片1： 因为用了JQuery，所以你完全可以把click事件放在js文件中 “增加”按钮js代码： var TfileUploadNum=1; /记录图片选择框个数 var Tnum=1; /ajax上传图片时索引 function TAddFileUpload var idnum = TfileUploadNum+1; var str=图片+
2、idnum+：; str += ; str += ; $(#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);这句代码：因为所谓的批量上传，其实
3、还是一个一个的上传，给用户的只是一个假象。只所以要延时执行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; 即使我命名精确到毫秒，另外再加上随机数，可是还是
4、有上传的第二张图片把上传的第一张图片覆盖的情况出现。所以此处我设置了延时1秒后在上传下一张图片。刚开始做这个东西的时候，用的是for循环，来把所有的图片一个一个的循环地用ajax上传，可是for循环速度太快了，可能第一张图片还没来得及ajax，第二张就被for过来了，还是有第二张覆盖第一张的情况出现。 下面来看TajaxFileUpload函数，代码如下： function TajaxFileUpload if(TnumTfileUploadNum+1) /准备提交处理 $(#uploadImgState+Tnum).html(); /开始提交 $.ajax ( type: POST, url
5、:http:/localhost/ajaxText2/Handler1.ashx, data:upfile:$(#uploadImg+Tnum).val,category:$(#pcategory).val, success:function (data, status) /alert(data); var stringArray = data.split(|); if(stringArray0=1) /stringArray0 成功状态(1为成功，0为失败) /stringArray1 上传成功的文件名 /stringArray2 消息提示 $(#uploadImgState+Tnum).h
6、tml();/+stringArray1+|+stringArray2); else /上传出错 $(#uploadImgState+Tnum).html(+stringArray2);/+stringArray2+); Tnum+; setTimeout(TSubmitUploadImageFile,0); ); 面的代码没什么可说的，很容易看懂。下面来看Handler1.ashx(一般处理程序)如何来处理post过来的图片的(此代码来自网上，具体地址忘记了)，下面只给出关键代码， 基本上这个批量上传图片的JQuery+ajax方式实现的程序完成了。如果你要上传word文档，PDF文件，只要稍作修改，就可以实现了！
