Please disable your adblock and script blockers to view this page
 

Upload multiple files or images through one asp.net fileupload control using jQuery plugin

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.

Upload multiple images or files in asp.net using jQuery



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


                                                     Download the complete example 

Now over to you:
" 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."
Previous
Next Post »

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.. ConversionConversion EmoticonEmoticon