Introduction:
In this article i am going to explain how to select and upload multiple files
and or images through single Fileupload control in asp.net using both C# and VB languages with the help of jQuery Multifile plugin.
In previous articles i explained how to Drag & drop to upload multiple files using AjaxFileUpload like Facebook in asp.net and
Description: While working on
asp.net project i got the requirement to implement the feature to be able to upload
multiple files e.g. MS-word, MS-Excel, Notepad or multiple Images of any type.
I was able to accomplish this functionality easily using jQuery plugin. This
plugin supports uploading multiple files, prevents selecting duplicate file and
also selected file can be removed before upload.
Implementation: Let's create a simple webpage to demonstrate
the concept.
- First of all you need to create a folder "MyFiles" in the root of the project. All the uploaded files will be stored in this folder.
- Next you need jQuery script files that are required to upload multiple files. Don't worry you will get all the required files when you download this sample project. The download link is provided at the end of this article.
Asp.Net C# Section
Below is the complete HTML source
code of the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultipleUpload_Csharp.aspx.cs" Inherits="MultipleUpload_Csharp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Upload Multiple Files or images</title>
<script src="Scripts/jquery-1.11.1.min.js"
type="text/javascript"></script>
<script src="Scripts/jquery.MultiFile.js"
type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width:400px; margin-left:240px; margin-top:90px;">
<legend>Example to Upload Multiple Files or images</legend>
<asp:FileUpload ID="FileUpload1"
runat="server"
class="multi"
/>
<br />
<asp:Button ID="btnUpload"
runat="server"
Text="Upload"
onclick="btnUpload_Click"
/>
<asp:Label ID="lblStatus"
runat="server"></asp:Label>
</fieldset>
</div>
</form>
</body>
</html>
Asp.Net C# Code to upload
multiple files/images
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Drawing;
public partial class MultipleUpload_Csharp
: System.Web.UI.Page
{
protected void
btnUpload_Click(object sender, EventArgs e)
{
StringBuilder sb = new
StringBuilder();
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("MyFiles") + "\\"
+ System.IO.Path.GetFileName(hpf.FileName));
sb.Append(String.Format("<br/><b>File
Name: </b> {0} <b>File
Size:</b> {1} <b>File
Type:</b> {2} uploaded successfully",
hpf.FileName, hpf.ContentLength, hpf.ContentType));
}
}
lblStatus.ForeColor = Color.Green;
lblStatus.Text = sb.ToString();
}
catch (Exception
ex)
{
lblStatus.ForeColor = Color.Red;
lblStatus.Text = "Error occured: "
+ ex.Message.ToString();
}
}
}
Asp.net VB Section
Below is the complete HTML source
code of the page.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MultipleUpload_VB.aspx.vb" Inherits="Multipleupload_VB"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Upload Multiple Files or images</title>
<script src="Scripts/jquery-1.11.1.min.js"
type="text/javascript"></script>
<script src="Scripts/jquery.MultiFile.js"
type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width:400px;">
<legend>Example to Upload Multiple Files or images</legend>
<asp:FileUpload ID="FileUpload1"
runat="server"
class="multi"
/>
<br />
<asp:Button ID="btnUpload"
runat="server"
Text="Upload"/>
<asp:Label ID="lblStatus"
runat="server"></asp:Label>
</fieldset>
</div>
</form>
</body>
</html>
Asp.Net VB Code to upload
multiple images/files
Imports System.Drawing
Imports System.Text
Partial Class Multipleupload_VB
Inherits System.Web.UI.Page
Protected Sub
btnUpload_Click(sender As Object, e As EventArgs) Handles
btnUpload.Click
Dim sb As New StringBuilder()
Try
Dim hfc As
HttpFileCollection = Request.Files
For i As
Integer = 0 To
hfc.Count - 1
Dim hpf As
HttpPostedFile = hfc(i)
If hpf.ContentLength > 0 Then
hpf.SaveAs(Server.MapPath("MyFiles") & "\" & System.IO.Path.GetFileName(hpf.FileName))
sb.Append([String].Format("<br/><b>File
Name: </b> {0} <b>File
Size:</b> {1} <b>File
Type:</b> {2} uploaded successfully",
hpf.FileName, hpf.ContentLength, hpf.ContentType))
End
If
Next
lblStatus.ForeColor = Color.Green
lblStatus.Text = sb.ToString()
Catch ex As Exception
lblStatus.ForeColor = Color.Red
lblStatus.Text = "Error occured: "
& ex.Message.ToString()
End Try
End Sub
End Class
" I hope you have learned how to Upload multiple files or images in asp.net using jQuery plugin with this example and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..