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

From : http://blog.youkuaiyun.com/mjh11310/article/details/5855700

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;    //需指定name
  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:

<form>添加  enctype="multipart/form-data"

<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"> //需一个runat="server"的input file控件
<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();
                    }
                }
            }