Add File Uploader Dynamically in asp.net
Add File Uploader Dynamically in asp.net
Step 1: Design web form .aspx page
<head runat="server">
<title>Multiple FileUpload Example</title>
<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)" />';
document.getElementById("UploadContainer").appendChild(div);
counter++;
}
function RemoveFileUpload(div)
{
document.getElementById("UploadContainer").removeChild(div.parentNode);
}
</script>
</head>
<body>
<form id="form1" runat="server"
enctype="multipart/form-data"
method = "post">
<span style ="font-family:Arial">Click
to add files</span>
<input id="Button1"
type="button"
value="Add New
File" onclick = "AddFileUpload()"
BackColor="YellowGreen"
/>
<br /><br />
<div id = "UploadContainer">
</div>
<br />
<asp:Button ID="btn" runat="server"
Text="Upload"
OnClick="btn_Click"
BackColor="YellowGreen"
/>
</form>
</body>
Step 2:Logic on .CS page
protected void
btn_Click(object sender, EventArgs e)
{
for (int i = 0; i
< Request.Files.Count; i++)
{
HttpPostedFile PostedFile = Request.Files[i];
if (PostedFile.ContentLength > 0)
{
string FileName = System.IO.Path.GetFileName(PostedFile.FileName);
PostedFile.SaveAs(Server.MapPath("Files\\")
+ FileName);
}
}
}
It will look like
Comments
Post a Comment