JQuery+ajax实现批量上传图片先看效果图选择要上传的图片，效果图如下：上传成功如下图：前台html主要代码：<button id="SubUpload" class="ManagerButton" onClick="TSubmitUploadImageFile ();return false;">确定上传</button> <button id="CancelUpload" class="ManagerButton" onClick="javascript:history.go (-1);">取消</button> <button id="AddUpload" class="ManagerButton" onClick="TAddFileUpload();return false;">增加</button><tr><td class="tdClass">图片1：</td><td 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="<tr><td class='tdClass'>图片"+idnum+"：</td>";str += "<td class='tdClass'><input 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(Tnum<TfileUploadNum+1){//准备提交处理$("#uploadImgState"+Tnum).html("<imgsrc=../images/loading.gif />");//开始提交$.ajax({type: "POST",url:"http://localhost/ajaxText2/Handler1.ashx",data:{upfile:$("#uploadImg"+Tnum).val (),category:$("#pcategory").val()},success:function (data, status){//alert(data);var stringArray = data.split ("|");if(stringArray[0]=="1"){//stringArray[0] 成功状态(1为成功，0为失败)//stringArray[1] 上传成功的文件名//stringArray[2] 消息提示$("#uploadImgState"+Tnum).html("<img src=../images/note_ok.gif/>");//+stringArray[1]+"|"+stringArray[2]);}else{//上传出错$("#uploadImgState"+Tnum).html("<img src=../images/note_error.gif/>"+stringArray[2]);//+stringArray[2]+"");}Tnum++;setTimeout("TSubmitUploadImageFile()",0);}});}}上面的代码没什么可说的，很容易看懂。
下面来看Handler1.ashx(一般处理程序)如何来处理post过来的图片的(此代码来自网上，具体地址忘记了)，下面只给出关键代码，全部代码在附件里。
1、string _fileNamePath = "";try{_fileNamePath = context.Request.Form["upfile"];//开始上传string _savedFileResult = UpLoadFile(_fileNamePath);context.Response.Write(_savedFileResult);}catch{context.Response.Write("0|error|上传提交出错");}2、//生成将要保存的随机文件名string fileName = GetFileName() + fileNameExt;//物理完整路径string toFileFullPath = HttpContext.Current.Server.MapPath(toFilePath);//检查是否有该路径没有就创建if (!Directory.Exists(toFileFullPath)){Directory.CreateDirectory(toFileFullPath);}///创建WebClient实例WebClient myWebClient = new WebClient();//设定windows网络安全认证方法1myWebClient.Credentials = CredentialCache.DefaultCredentials;//要上传的文件FileStream fs = new FileStream(fileNamePath, FileMode.Open, FileAccess.Read); //FileStream fs = OpenFile();BinaryReader r = new BinaryReader(fs);//使用UploadFile方法可以用下面的格式//myWebClient.UploadFile(toFile, "PUT",fileNamePath);byte[] postArray = r.ReadBytes((int)fs.Length);Stream postStream = myWebClient.OpenWrite(toFile, "PUT");if (postStream.CanWrite){postStream.Write(postArray, 0, postArray.Length);}3、检查是否合法的上传文件private bool CheckFileExt(string _fileExt){string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg" };for (int i = 0; i < allowExt.Length; i++){if (allowExt[i] == _fileExt) { return true; }}return false;}4、生成要保存的随即文件名public static string GetFileName(){Random rd = new Random();StringBuilder serial = new StringBuilder();serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff"));serial.Append(rd.Next(0, 999999).ToString());return serial.ToString();}Ok，基本上这个批量上传图片的JQuery+ajax方式实现的程序完成了。