Upload multiple by one asp.net fileupload control using jQuery

-

Upload multiple files by one asp.net file upload control using jQuery:



In this Post we use one asp.net fileupload control and by the help of jquery upload multiple file at a time.  But before the Example we give you a list of Properties of asp.net file upload control.

Asp.net Fileupload Control Properties:

The FileUpload control has list of properties. These are:-
  • AccessKey:  Gets or sets the access key that allows you to quickly navigate to the Web server control. 
  • Adapter: Gets the browser-specific adapter for the control. 
  • AllowMultiple: Gets or sets a value that specifies whether multiple files can be selected for upload.
  • BackColor: Get or sets the background color of the Web server control. 
  • BindingContainer: Gets the control that contains this control's data binding. 
  • BorderColor: Gets or sets the border color of the Web control. 
  •  BorderStyle: Gets or sets the border style of the Web server control. 
  •  BorderWidth: Gets or sets the border width of the Web server control. 
  • ClientID : Gets the control ID for HTML markup that is generated by ASP.NET. 
  • ClientIDMode: Gets or sets the algorithm that is used to generate the value of
  • CssClass: Gets or sets the Cascading Style Sheet (CSS) class rendered by the Web server control on the client. 
  • FileBytes: Gets an array of the bytes in a file that is specified by using a FileUpload control.
  • FileContent: Gets a Stream object that points to a file to upload using the FileUpload control.
  • File-name: Gets the name of a file on a client to upload using the FileUpload control.
  • Font: Gets the font properties associated with the Web server control.  
  • Fore-color: Gets or sets the foreground color (typically the color of the text) of the Web server control. 

JQuery for uploading multiple File:

<script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.MultiFile.js" type="text/javascript"></script>

How to upload File by file upload control:

  • The FileUpload class displays a text box control and a browse button
  • This button enables users to select a file on the client and upload it to the Web server.
  • The user specifies the file to upload by entering the full path of the file on the local computer.
  • Or the user can select the file by clicking the Browse button.
  • And then locating it in the Choose File dialog box.

Multiple files upload by asp.net control using Jquery:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="uploadmultipulfile.aspx.cs" Inherits="uploadmultipulfile" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!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 id="Head1" 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>
    <style type="text/css">
        .style1
        {
            color: #990000;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
   <div align="center" style="height: 175px; width: 832px">
   <h1 align="center" class="style1">Example to Upload Multiple Files
   </h1>
  

        <asp:FileUpload ID="FileUpload1" runat="server" class="multi" />
        <br />
        <br />
        <asp:Button ID="btnUpload" runat="server" Text="Upload"
            onclick="btnUpload_Click" />
            <br />
            <br />
            <asp:Label ID="lblStatus" runat="server" style="color: #990000"></asp:Label>
 
       <br />
 
    </div>
    </form>
</body>
</html>


C# code Upload Multiple Files Using FileUpload Control:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Text;

public partial class uploadmultipulfile : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    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("Files") + "\\" + 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();
        }

    }
}

Download Full code...

 C# - Example to Upload Multiple Files in asp.net:


upload multiple by one asp.net fileupload control using jQuery
Upload multiple by one asp.net Fileupload 

Asp.net related Other Post and Examples:

Comments

Post a Comment