【原创】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"));

            }

        }