Multiple Dynamic FileUpload controls with TextBoxes for FileName using JavaScript in ASP.Net

Here I have created sample that will help you out.

HTML

<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<script type="text/javascript">
    var counter = 0;
    function AddFileUpload() {
        var div = document.createElement('DIV');
        div.innerHTML = '<input id="file' + counter + '" name = "file' + counter + '" type="file" /><input id="Button' + counter + '" type="button" value="Remove" onclick = "RemoveFileUpload(this)" />&nbsp;&nbsp;<input type="text" id="txtFile' + counter + '" name="txtFile' + counter + '">';
        document.getElementById("FileUploadContainer").appendChild(div);
        counter++;
    }
    function RemoveFileUpload(div) {
        document.getElementById("FileUploadContainer").removeChild(div.parentNode);
    }
</script>
<span style="font-family: Arial">Click to add files</span>&nbsp;&nbsp;
<input id="Button1" type="button" value="add" onclick="AddFileUpload()" />
<br />
<br />
<div id="FileUploadContainer">
</div>
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
</form>

Code

protected void btnUpload_Click(object sender, EventArgs e)
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        string customFileName = Request.Form["txtFile" + i];
        HttpPostedFile PostedFile = Request.Files[i];
        if (PostedFile.ContentLength > 0)
        {
            string FileName = System.IO.Path.GetFileName(PostedFile.FileName);
            string extension = System.IO.Path.GetExtension(PostedFile.FileName);
            PostedFile.SaveAs(Server.MapPath("Files\\") + customFileName + extension);
        }
    }
}

Screenshot

While Uploading Image

After Image Uploading