怎样用js动态生成上传控件,.NET不定数量上传

2024-10-23 09:25:31

1、将aspx页面中Form标签改为:<form id="form1" runat="server" enctype= "multipart/form-data">,也就是说在原有的基础上增加了enctype= "multipart/form-data"

2、在页面中加入如下代码,这里包含了一个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>

3、增加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>

4、效果展示:当点击浏览时就会增加一个新上传控件,如果感觉哪个不需要可以点击后面的删除功能删除。

怎样用js动态生成上传控件,.NET不定数量上传

5、服务器端处理代码: 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;可以得到所有上传文件的集合,然后遍历上传就可以了。我这里没有做上传限制,很不安全,如果有必要的话你在使用时可以判断一下文件类型,大小等做一定的限制,我为了简化说明,这些都没有写上来。

6、可扩展功能:如果你自己会做图的话,可以把控件换成自己美化的控件,点击之后触发选择文件的事件,类似这种图片上传功能:

怎样用js动态生成上传控件,.NET不定数量上传
猜你喜欢