动态增加N 个上传控件，实现批量上传

JS:

<script language="javascript" type="text/ecmascript">  
//======================  
//功能:在表单中input file控件  
//参数:parentID---要插入input file控件的父元素ID  
//    inputID----input file控件的ID  
//======================  
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.width="400";
 
  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容器加入父元素  
}  
//============================  
//功能:删除一个包含input file的div 容器  
//参数:parentID---input file控件的父元素ID  
//    DelDivID----个包含input file的div 容器ID  
//============================  
function removeInput(parentID,DelDivID){  
 var parent=$(parentID);  
 parent.removeChild($(DelDivID));  
}  
//通过元素ID获取文档中的元素   
function $(v){return document.getElementById(v);} 

    </script>

 

HTML:

<div class="ManageLine" onmouseover="this.className='ManageLine-hover'" onmouseout="this.className='ManageLine'">
<div align="left" id="div_Pic" style="border: 1px solid #CCCCCC">
<input name="PicFile" type="file" id="ShowPicFile" runat="server" style="width: 400px">
<input type="button" onclick="createInput('div_Pic','PicFile')" name="button" id="button"  value="+ 继续新增图片"> 

</div></div>

CS:

 

            HttpFileCollection Files = HttpContext.Current.Request.Files;

            //批量上传图片
            for (int i = 0; i < Files.Count; i++)
            {
                HttpPostedFile myPost = Files[i];
                if (myPost.ContentLength != 0)
                {
                    type = myPost.FileName.Substring(myPost.FileName.LastIndexOf(".") + 1);
                    if (type == "jpg" || type == "JPG" || type == "jpge" || type == "JPGE" || type == "gif" || type == "GIF")
                    {
                        //判断上传文件大小 字节型
                        int FileLength = myPost.ContentLength;
                        if (FileLength > 1024 * 1024)
                        {
                            Response.Write("上传图片必须小于1M！");
                            Response.End();
                        }
                        else
                        {
                            string path = HttpContext.Current.Request.MapPath("~/zp/");//获取上传文件的网站目录路径

                            Random rand = new Random();
                            string strName = DateTime.Now.ToString("yyyyMMddhhmm") + rand.Next(100, 999) + "." + type;
                            myPost.SaveAs(path + strName);

                        }

                    }
                    else
                    {
                        Response.Write("<script>alert('图片格式不正确！');</script>");
                        Response.End();
                    }
                }
            }