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;可以得到所有上传文件的集合，然后遍历上传就可以了。
补充：asp.net教程,.Net开发 
