JQuery實現ajax批量上傳圖片

 

 

如果不適合放首頁，請管理員早撤，謝謝！

在網上搜尋了一下，發現以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("<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過來的圖片的(此代碼來自網上，具體地址忘記了)，下面只給出關鍵代碼，全部代碼在附件裡。

 

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方式實現的程式完成了。如果你要上傳word文檔，pdf檔案，只要稍作修改，就可以實現了。

 

 

PS：這篇文章請N人路過！個人認為，部落格園首頁的文章是應該放那些適合中層程式員的，少放些N人寫的文章，因為訪問部落格園的使用者大多還是中層程式員，如果

都放哪些很N的文章，只有N人能看懂的文章，那部落格園一天的訪問量能有幾個N呢？

今天多嘴了，見諒！ 

本文轉載自：http://www.cnblogs.com/Jayan/archive/2009/03/31/1425897.html