JQuery+ajax实现批量上传图片(附实例源码) - 我叫三炮

JQuery+ajax实现批量上传图片(附实例源码)

--摘录

JQuery+ajax实现批量上传图片(附实例源码)

 本实例源码下载

先看效果图
 点击增加按钮，会增加一个选择框，如下图：

选择要上传的图片，效果图如下：

 

上传成功如下图：

 

 

下面来看代码：
前台html主要代码：

 

<button id="SubUpload" class="ManagerButton" onClick="TSubmitUploadImageFile();return false;">确定上传</button>&nbsp;&nbsp; 
<button id="CancelUpload" class="ManagerButton" onClick="javascript:history.go(-1);">取消</button>&nbsp;&nbsp; 
<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("<img src=../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过来的图片的(此代码来自网上，具体地址忘记了)，下面只给出关键代码，

 

基本上这个批量上传图片的JQuery+ajax方式实现的程序完成了。如果你要上传word文档，PDF文件，只要稍作修改，就可以实现了！