I have a file upload control.Now on clicking on that, I want to select multiple files.
How can I do so?
This question is related to
asp.net
file-upload
There are other options you can use these controls which have multiple upload options and these controls have also Ajax support
1) Flajxian
2) Valums
3) Subgurim FileUpload
aspx code
<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
<asp:Button ID="btnUpload" Text="Upload" runat="server" OnClick ="UploadMultipleFiles" accept ="image/gif, image/jpeg" />
<hr />
<asp:Label ID="lblSuccess" runat="server" ForeColor ="Green" />
Code Behind:
protected void UploadMultipleFiles(object sender, EventArgs e)
{
foreach (HttpPostedFile postedFile in FileUpload1.PostedFiles)
{
string fileName = Path.GetFileName(postedFile.FileName);
postedFile.SaveAs(Server.MapPath("~/Uploads/") + fileName);
}
lblSuccess.Text = string.Format("{0} files have been uploaded successfully.", FileUpload1.PostedFiles.Count);
}
step 1: add
<asp:FileUpload runat="server" id="fileUpload1" Multiple="Multiple">
</asp:FileUpload>
step 2: add
Protected Sub uploadBtn_Click(sender As Object, e As System.EventArgs) Handles uploadBtn.Click
Dim ImageFiles As HttpFileCollection = Request.Files
For i As Integer = 0 To ImageFiles.Count - 1
Dim file As HttpPostedFile = ImageFiles(i)
file.SaveAs(Server.MapPath("Uploads/") & ImageFiles(i).FileName)
Next
End Sub
Why not use flash & javascript upload control?
You can try below code:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Try
Dim j As Integer = 0
Dim hfc As HttpFileCollection = Request.Files
Dim PathName As String
For i As Integer = 0 To hfc.Count - 1
Dim hpf As HttpPostedFile = hfc(i)
If hpf.ContentLength > 0 Then
hpf.SaveAs(Server.MapPath("~/E:\") & System.IO.Path.GetFileName(hpf.FileName))
PathName = Server.MapPath(hpf.FileName)
If j < hfc.Count Then
Dim strConnString As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
Dim sqlquery As String
sqlquery = "Insert_proc"
Dim con As New SqlConnection(strConnString)
Dim cmd As New SqlCommand(sqlquery, con)
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.Add("@FilePath", SqlDbType.VarChar).Value = PathName
j = j + 1
Try
con.Open()
cmd.ExecuteNonQuery()
Catch ex As Exception
Throw ex
Finally
con.Close()
con.Dispose()
End Try
If j = hfc.Count Then
Exit Sub
End If
End If
End If
Next
Catch generatedExceptionName As Exception
Throw
End Try
End Sub
here is the complete example of how you can select and upload multiple files in asp.net using file upload control....
write this code in .aspx file..
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<div>
<input type="file" id="myfile" multiple="multiple" name="myfile" runat="server" size="100" />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<br />
<asp:Label ID="Span1" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
after that write this code in .aspx.cs file..
protected void Button1_Click(object sender,EventArgs e) {
string filepath = Server.MapPath("\\Upload");
HttpFileCollection uploadedFiles = Request.Files;
Span1.Text = string.Empty;
for(int i = 0;i < uploadedFiles.Count;i++) {
HttpPostedFile userPostedFile = uploadedFiles[i];
try {
if (userPostedFile.ContentLength > 0) {
Span1.Text += "<u>File #" + (i + 1) + "</u><br>";
Span1.Text += "File Content Type: " + userPostedFile.ContentType + "<br>";
Span1.Text += "File Size: " + userPostedFile.ContentLength + "kb<br>";
Span1.Text += "File Name: " + userPostedFile.FileName + "<br>";
userPostedFile.SaveAs(filepath + "\\" + Path.GetFileName(userPostedFile.FileName));
Span1.Text += "Location where saved: " + filepath + "\\" + Path.GetFileName(userPostedFile.FileName) + "<p>";
}
} catch(Exception Ex) {
Span1.Text += "Error: <br>" + Ex.Message;
}
}
}
}
and here you go...your multiple file upload control is ready..have a happy day.
default.aspx code
<asp:FileUpload runat="server" id="fileUpload1" Multiple="Multiple">
</asp:FileUpload>
<asp:Button runat="server" Text="Upload Files" id="uploadBtn"/>
default.aspx.vb
Protected Sub uploadBtn_Click(sender As Object, e As System.EventArgs) Handles uploadBtn.Click
Dim ImageFiles As HttpFileCollection = Request.Files
For i As Integer = 0 To ImageFiles.Count - 1
Dim file As HttpPostedFile = ImageFiles(i)
file.SaveAs(Server.MapPath("Uploads/") & file.FileName)
Next
End Sub
To add multiple files use below code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.fileUpload{
width:255px;
font-size:11px;
color:#000000;
border:solid;
border-width:1px;
border-color:#7f9db9;
height:17px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="fileUploadarea"><asp:FileUpload ID="fuPuzzleImage" runat="server" CssClass="fileUpload" /><br /></div><br />
<div><input style="display:block;" id="btnAddMoreFiles" type="button" value="Add more images" onclick="AddMoreImages();" /><br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Upload" />
</div>
</div>
<script language="javascript" type="text/javascript">
function AddMoreImages() {
if (!document.getElementById && !document.createElement)
return false;
var fileUploadarea = document.getElementById("fileUploadarea");
if (!fileUploadarea)
return false;
var newLine = document.createElement("br");
fileUploadarea.appendChild(newLine);
var newFile = document.createElement("input");
newFile.type = "file";
newFile.setAttribute("class", "fileUpload");
if (!AddMoreImages.lastAssignedId)
AddMoreImages.lastAssignedId = 100;
newFile.setAttribute("id", "FileUpload" + AddMoreImages.lastAssignedId);
newFile.setAttribute("name", "FileUpload" + AddMoreImages.lastAssignedId);
var div = document.createElement("div");
div.appendChild(newFile);
div.setAttribute("id", "div" + AddMoreImages.lastAssignedId);
fileUploadarea.appendChild(div);
AddMoreImages.lastAssignedId++;
}
</script>
</form>
</body>
</html>
Server side code:
try
{
HttpFileCollection hfc = Request.Files;
for (int i = 0; i < hfc.Count; i++)
{
HttpPostedFile hpf = hfc[i];
if (hpf.ContentLength > 0)
{
hpf.SaveAs(Server.MapPath("~/uploads/") +System.IO.Path.GetFileName(hpf.FileName);
}
}
}
catch (Exception)
{
throw;
}
I just come across this brilliantly simple solution if you are using .Net 4.5 (not supported this easily in lower versions) and you can use jQuery to make things really simple and painless.
Uploading Multiple Files Using jQuery and Generic Handler in ASP.Net 4.5
Of course there is the commercial version for classic ASP which can be found at ASP Uploader
The FileUpload.AllowMultiple property in .NET 4.5 and higher will allow you the control to select multiple files.
Below 4.5 like 4.0(vs 2010) we can use jquery for multiple file upload in single control,using,2 js files: http://code.jquery.com/jquery-1.8.2.js and http://code.google.com/p/jquery-multifile-plugin/
in aspx file upload tag,add like class="multi"
<asp:FileUpload ID="FileUpload1" class="multi" runat="server" />
If you want working example go to link download sample.
Source: Stackoverflow.com