I'm working in tiny project that deal with multiple file uploading.
at the begining user have one fileupload control and a small image called fileuploadadder .
each time user click on fileuploadadder , a clone of the first fileupload control added to the page with jquery . the ids of the fileupload controls are uniqe. such as file1 , file2, ...
now , i want when user clicks on a button at the end of the page asp.net uploads the selected files.
tnx
Here's an example:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.IO" %>
<script type="text/c#" runat="server">
protected void BtnUpload_Click(object sender, EventArgs e)
{
if (Request.Files != null)
{
foreach (string file in Request.Files)
{
var uploadedFile = Request.Files[file];
if (uploadedFile.ContentLength > 0)
{
var appData = Server.MapPath("~/app_data");
var fileName = Path.GetFileName(uploadedFile.FileName);
uploadedFile.SaveAs(Path.Combine(appData, fileName));
}
}
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form id="Form1" runat="server" enctype="multipart/form-data">
<a href="#" id="add">Add file</a>
<div id="files"></div>
<asp:LinkButton ID="BtnUpload" runat="server" Text="Upload" OnClick="BtnUpload_Click" />
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('#add').click(function () {
$('#files').append($('<input/>', {
type: 'file',
name: 'file' + new Date().getTime()
}));
return false;
});
</script>
</body>
</html>