动态增加N 个上传控件,实现批量上传
时间:2010-08-31 来源:裴鹏
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();
}
}
}