javascript動態產生圖文上傳控制項實現代碼

步驟/方法

 ①將aspx頁面中Form標籤改為

代碼如下	複製代碼
：<form id="form1" runat="server" enctype= "multipart/form-data">，

也就是說在原有的基礎上增加了enctype= "multipart/form-data"
②在頁面中加入如下代碼，這裡包含了一個div容器，以方便用js動態向容器中增加控制項

代碼如下	複製代碼
<div align="left" id="div_Pic" style="border:1px solid #CCCCCC">     <input name="PicFile" type="file" id="ShowPicFile" onClick="createInput('div_Pic','PicFile')">     </div>

  ③增加js代碼：

代碼如下

複製代碼

<script language="javascript" type="text/ecmascript">     function createInput(parentID,inputFileID){     var parent=$(parentID);//擷取父元素     var div=document.createElement("div");//建立一個div容器用於包含input file     var x=parseInt(Math.random()*(80-1))+1;     var divName=inputFileID+x.toString();//隨機div容器的名稱     div.name=divName;     div.id=divName;     var  aElement=document.createElement("input"); //建立input     aElement.name=inputFileID;     aElement.id=inputFileID;     aElement.type="file";//設定類型為file     aElement.onclick=function(){ createInput("div_Pic","PicFile")};     var delBtn=document.createElement("input");//再建立一個用於刪除input file的Button     delBtn.type="button";     delBtn.value="刪除";     delBtn.onclick=function(){ removeInput(parentID,divName)};//為button設定onclick方法     div.appendChild(aElement);//將input file加入div容器     div.appendChild(delBtn);//將刪除按鈕加入div容器     parent.appendChild(div);//將div容器加入父元素     }     function removeInput(parentID,DelDivID){     var parent=$(parentID);     parent.removeChild($(DelDivID));     }     //通過元素ID擷取文檔中的元素     function $(v){return document.getElementById(v);}     </script>

    ④效果展示：

 

    當點擊瀏覽時就會增加一個新上傳控制項，如果感覺哪個不需要可以點擊後面的刪除功能刪除。
    ⑤伺服器端處理代碼：

代碼如下

複製代碼

System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;     for (int i = 0; i < files.Count; i++)     {     System.Web.HttpPostedFile filePicture = files[i];     string FileType;    // 上傳檔案類型(副檔名)     FileType = System.IO.Path.GetExtension(filePicture.FileName).ToLower();     string sFileName = Guid.NewGuid().ToString() + FileType;     filePicture.SaveAs(Server.MapPath("HotPic\" + sFileName));//儲存圖片     }

    用System.Web.HttpContext.Current.Request.Files;可以得到所有上傳檔案的集合，然後遍曆上傳就可以了。