ASP.NET 动态生成HTML元素，多文件上传完美攻略

多文件上传与处理

最新推荐文章于 2025-09-04 16:57:24 发布

原创最新推荐文章于 2025-09-04 16:57:24 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #asp.net #javascript #多线程 #border

本文介绍了一种使用JavaScript动态添加HTML元素实现多文件上传的方法，并限制了上传文件的数量。此外，还介绍了如何通过ASP.NET后端处理上传的文件，包括验证文件类型、大小等，并将文件保存到指定路径。

HTML文件：

1 动态生成 HTML元素

2 限制生成元素个数

<html>

<title>多文件上传</title>

//功能描述：使用JavaScript动态添加HTML的元素

var j;

//添加行

function AddRow()

{

j=FreeId();

if(j<5)//上传文件的个数

{

var objNewRow = document.getElementById("phones").insertRow(j);

objNewRow.id = j;

var objNewCell1 = document.getElementById("phones").rows[j].insertCell(0); //添加第1列

objNewCell1.innerHTML = "<td width="25%" align="center" valign="middle"><input name="filename"+j+"" type="file"></td>";

var objNewCell2 = document.getElementById("phones").rows[j].insertCell(1); //添加第2列

objNewCell2.innerHTML = "<td width="25%" align="center" valign="middle"><a onclick="AddRow();" style="cursor:hand">添加</a></td>";

var objNewCell3 = document.getElementById("phones").rows[j].insertCell(2); //添加第3列

objNewCell3.innerHTML = "<td width="10%" align="center" valign="middle"><a onClick="DelCurrentRow(" + j + ");" style="cursor:hand">删除</a></td>";

}

//查找要添加或插入的行数

function FreeId()

{

var b=0;

with(document.getElementById("phones"))

for(var a=0;a<rows.length;a++)

{

if(rows[a].id!=a)//判断是否有被删除的行

{

return a;//返回要插入的行

}

b=a+1;//返回要添加的行

}

return b;//默认返回第一行

}

//删除行

function DelCurrentRow(j)

{

with(document.getElementById("phones"))

{

for (var i=0;i<rows.length&&rows.length>1;i++) //最后一个不能删除

{

if (rows[i].id == j)

{

deleteRow(i);

}

</script>

</head>

<div>

<table style="border: 1px; width: 500px;" cellpadding="0" cellspacing="0" align="center"

class="TableBody" id="phones">

</table>

</div>

<input id="Submit1" runat="server" onserverclick="Submit1_ServerClick" type="submit"

value="submit" />

</div>

</form>

</body>

</html>

2 后台文件：

protected void Submit1_ServerClick(object sender, EventArgs e)

{

ClientScriptManager sec = Page.ClientScript;

if (Request.Files.Count > 0)

{

string message = string.Empty;//处理信息

string typename = string.Empty;//文件名称

string filename = DateTime.Today.Year.ToString() + DateTime.Today.Month.ToString() + DateTime.Today.Hour.ToString();

filename += DateTime.Now.Millisecond;

Random ran = new Random();

for (int b = 0; b < Request.Files.Count; b++)

{

if ("" != Request.Files[b].FileName)//有无上传文件

{

if (0 < Request.Files[b].FileName.LastIndexOf('.'))//有无文件后缀

{

typename = Request.Files[b].FileName;

typename = typename.Substring(typename.LastIndexOf('.')).ToLower();

if (0 < imgExt.IndexOf(typename))//文件是否合法

{

if (2097150 > Request.Files[b].ContentLength)//判断文件大小是否正确。2M

{

char ch = new char();

for (int i = 0; i < 10; i++)

{

ch = (char)ran.Next(97, 122);//生成10个随机的小写字母

filename += ch.ToString();

}

Request.Files[b].SaveAs("F:/WEB server/security/command/uploadfiles/" + filename + typename);

message += "文件" + (b + 1).ToString() + "上传成功。 ";

}

else

{

message += "文件" + (b + 1).ToString() + "大小不正确。 ";

continue;

}

else

{

message += "文件" + (b + 1).ToString() + "类型" + typename + "不正确。 ";

continue;

}

else

{

message += "文件" + (b + 1).ToString() + "后缀名称" + "不正确。 ";

continue;

}

else

{

message += "文件" + (b + 1).ToString() + "为空。 ";

continue;

}

sec.RegisterClientScriptBlock(this.GetType(), "处理信息", "<script>alert('" + message + "');</script>");//输出处理结果信息

}

else

{

return;

}

3 webconfig 文件配置

因为不配置的话，同时上传2个以上大于2m的文件就会产生错误（页面空白）。主要的原因是没有让多线程去

处理批量文件的上传和保存。并且没有配置maxrequestlength的长度。所以当计算机繁忙或上传文件过大时就会

上传失败。

<system.web>

<httpRuntime maxRequestLength="4000"

enable = "True"

requestLengthDiskThreshold="512

useFullyQualifiedRedirectUrl="True"

executionTimeout="46"

minFreeThreads="4"/>

</system.web>