Search

Wednesday, June 15, 2016
9 comments

How to use FileUpload Control in ASP.NET

7:30 AMWednesday, June 15, 2016
Introduction
The FileUpload control displays a text box control and a browse button that enable users to browse a file from the local or remote machine to upload it on the Web server. You can upload a file on the Web Server by specifying the full path of the file to be uploaded (for example D:\Myfiles\Test.txt) in the textbox of this control . Alternatively , you can select the file by clicking the browse button , and then locating it in the Choose File dialog box.

Top Related article


  1. Fileupload control enable disable programmatically in ASP.NET
  2. Programmatically change border color of fileupload control in ASP.NET
  3. Programmatically change background color of fileupload control in ASP.NET
  4. How to validate fileupload control in asp.net also choose selected format
  5. How to insert image into database using file upload control


Public Properties of the FileUpload Class
FileBytes : Obtains an array of the bytes in a file that is specified by using a FileUpload control

FileContent : Obtains a Stream object that points to a file to upload using the FileUpload control.

FileName : Obtains the name of a file on a client to upload using the FileUpload control.

HasFile : Obtains a value indicating whether the FileUpload control contains a file.

PostedFile : Obtains the underlying HttpPostedFile object for a file that is uploaded by using the FileUpload control.

Public Method of the FileUpload Class
SaveAs : Saves the data of an uploaded file to a specified path on the web server.

Example of FileUpload control in ASP.NET

<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (FileUpload1.HasFile)
        {
            FileUpload1.SaveAs(Server.MapPath("~/images/" + FileUpload1.FileName));
        }
        else
        {
            emptyupload.Text = "Choose your file"; 
        }
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            font-size: larger;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="auto-style1">
   
        <strong>Pick Your file from file upload control<br />
        </strong>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Save" />   
        <br />
        <asp:Label ID="emptyupload" runat="server"></asp:Label>   
    </div>
    </form>
</body>
</html>
Output
Example of file upload control in asp.net

Example of file upload control

Only GIF image support by FileUpload control   


<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {        string extn=string.Empty ;
        if (FileUpload1.HasFile)
        {
            extn = System.IO.Path.GetExtension(FileUpload1.FileName);
            if ("gif" == extn)
            {
                FileUpload1.SaveAs(Server.MapPath("~/images/" + FileUpload1.FileName));
                emptyupload.Text = "Save sucessfully";
            }
            else
            {
                emptyupload.Text = "only gif support";
            }
        }
        else
        {
            emptyupload.Text = "Choose your file"; 
        }
    }
</script>
Note : GetExtension is the method of the path class which is detect extension of the filename.

Multiple File Upload control on Same Page

This is the new features comes into the DOTNET Framework 3.5. If you have three or more file upload control on same page then what to do for save files into project directory. If you use traditional code like
if(fileupload1.hasfile)
{
//code)}
if(fileupload2.hasfile)
{
//code
}
This is the wrong for developer perspective. You can use new features of DOTNET Framework 3.5 i.e HttpFileCollection class.  By using Request.Files property you can get the files from the server.
Check the simple example of it.


Source Code:

 <div>
 
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <asp:FileUpload ID="FileUpload2" runat="server" />
        <br />
        <asp:FileUpload ID="FileUpload3" runat="server" />
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" />
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label>
 
    </div>
  protected void Button1_Click(object sender, EventArgs e)
    {
        string filepath = "E:\\Upload";
        HttpFileCollection hfc = Request.Files;
        for (int i = 0; i < hfc.Count; i++)
        {
            HttpPostedFile hpf = hfc[i];
            try
            {
                if (hpf.ContentLength>0)
                {
                    Label1.Text += "File Content Type: " + hpf.ContentType+"<br/>";
                    Label1.Text += "File Size: " + hpf.ContentLength + "<br/>";
                    Label1.Text += "File Name: " + hpf.FileName + "<br/>";
                    hpf.SaveAs(filepath + "\\" + System.IO.Path.GetFileName(hpf.FileName));
                    Label1.Text += "Location of the file: " + filepath + "\\" + System.IO.Path.GetFileName(hpf.FileName);
                 
                }
            }
            catch (Exception ex)
            {

                Label1.Text += "Error: " + ex.Message;
            }
        }

    }
Code Generate the following output:

Multiple File Upload control on Same Page

Protected by Copyscape Online Copyright Protection Software

9 comments :

  1. Thanks for sharing such an interesting post with us. You have made some valuable points which are very useful for all readers Online ASP.NET Tutorial

    ReplyDelete
  2. This blog provides the online tutorial of ASP.Net.The candidate which are interested in ASP.Net can join this blog...
    Dot Net Training in Noida

    ReplyDelete
  3. Thanks for sharing this useful information..Its really very informative.

    Dot Net Training in Chennai

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. use this link https://www.youtube.com/watch?v=0R3PgGCWA00

    ReplyDelete
  6. It was really a nice article and I was really impressed by reading this article. We are also giving all software Course Online Training. The ASP.Net Online Training is one of the leading Online Training institute in the world.

    ReplyDelete
  7. hi, it works with IIS Express but not with IIS and with a remote server?

    ReplyDelete

 
Toggle Footer
Top