programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Website by URL, How to Play YouTube Videos in by using Jquery , Jquery Change div background on mouseover in , JQuery UI Datepicker (Calendar) etc.

Wednesday, October 8, 2014

Upload multiple by one fileupload control using jQuery

Upload multiple files by one file upload control using jQuery:

In this Post we use one 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 file upload control. 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 control using Jquery:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<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">
            color: #990000;
            text-decoration: underline;
    <form id="form1" runat="server">
   <div align="center" style="height: 175px; width: 832px">
   <h1 align="center" class="style1">Example to Upload Multiple Files

        <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 />

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();
            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();


 C# - Example to Upload Multiple Files in

upload multiple by one fileupload control using jQuery
Upload multiple by one Fileupload related Other Post and Examples:

No comments:

Post a Comment