【原创】C#+JS 实现动态增减图片上传框

有时候我们会在一些添加记录的时候，希望同时上传多张图片，以保存对应的记录信息来源。针对这种场景，我们可以使用 JS + C# 代码实现。

具体代码如下：

前台 Sample.aspx：

<input id="btnAdd" type="button" value="remove" onclick="javascript: removeImg()" />
<input id="btnRemove" type="button" value="add" onclick="javascript: addImg()" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
<div>
<asp:FileUpload ID="img0" runat="server" />
</div>
<div id="imgUpload">
</div>

<script type="text/javascript">

function addImg()
{

var nodes = document.getElementById("imgUpload");

var newImgId = Math.round(nodes.childNodes.length / 2 - 0.5) + 1;

var newchild = document.createElement("input");

newchild.setAttribute("id", "img" + newImgId);

newchild.setAttribute("name","img"
+ newImgId);

newchild.setAttribute("type", "file");

nodes.appendChild(newchild);

newchild = document.createElement("br");

nodes.appendChild(newchild);

}

function removeImg()
{

var nodes
= document.getElementById("imgUpload");

if (nodes.childNodes.length
<= 1) {

alert("至少保留一个上传控件！");
//这里仅仅是为了让用户有更好的体验

} else {

for (i
= 0; i < 2; i++) {

if (nodes.lastChild)
{

nodes.removeChild(nodes.lastChild);

}

}

}

}

</script>

后台代码Sample.aspx.cs：

protected void btnSubmit_Click(object sender, EventArgs e)
{
HttpFileCollection hfc = Request.Files;
int i = 0;
foreach (string file in hfc.AllKeys)
{
i++;
HttpPostedFile f = hfc[file];
Response.Write(f.FileName);
f.SaveAs(Server.MapPath(i + ".jpg"));
}
}