This section describes the two methods used in ASP.NET to upload files to web pages.
ASP.NET includes two controls that enable users to upload files to a web server. Once the server accepts the uploaded file data, the application can save it, inspect it, or ignore it. The next control allows file upload:
HtmlInputFile - HTML server control
FileUpload - ASP.NET web control
Both controls allow file upload, but the FileUpload control automatically sets the encoding format, while the HtmlInputFile control does not.
In this tutorial, we will use the FileUpload control. This control allows the user to preview the selected file to be uploaded. It provides a preview button and a text box where the file name can be entered.
Once the user enters a file name in the text box or previews the file, the FileUpload control's SaveAs method saves the file to the hard disk.
The basic syntax of FileUpload is as follows:
<asp:FileUpload ID= "Uploader" runat = "server" />The FileUpload class is derived from the WebControl class and inherits all its elements. The FileUpload class has these read-only properties:
| property | describe |
|---|---|
| FileBytes | Returns a set of bytecodes for the file to be uploaded |
| FileContent | Returns the stream object of the file to be uploaded |
| FileName | Returns the name of the file that will be uploaded |
| HasFile | Determine whether the control has files to upload |
| PostedFile | Returns a reference to the uploaded file |
The published file is encapsulated in an object in the form of HttpPostedFile, which can be accessed through the PostedFile property of the FileUpload class.
The HttpPostedFile class has the following commonly used properties:
| property | describe |
|---|---|
| ContentLength | Returns the byte size of the uploaded file |
| ContentType | Returns the MIME type of the uploaded file |
| FileName | Return the full name of the file |
| InputStream | Returns the stream object of the file to be uploaded |
The following example illustrates the FileUpload control and its properties. This form has a FileUpload control as well as a save button and a label control with the actual file name, type, and length.
In design mode, the table looks like this:
The relevant file codes are listed below:
<body> <form id="form1" runat="server"> <div> <h3> File Upload:</h3> <br /> <asp:FileUpload ID="FileUpload1" runat="server" /> <br /><br /> <asp:Button ID="btnsave" runat="server" onclick="btnsave_Click" Text="Save" /> <br /><br /> <asp:Label ID="lblmessage" runat="server" /> </div> </form></body>The code for the save button is listed below:
protected void btnsave_Click(object sender, EventArgs e){ StringBuilder sb = new StringBuilder(); if (FileUpload1.HasFile) { try { sb.AppendFormat(" Uploading file: {0}", FileUpload1.FileName); //saving the file FileUpload1.SaveAs("<c:\SaveDirectory>" + FileUpload1.FileName); //Showing the file information sb.AppendFormat("<br/> Save As: {0}", FileUpload1.PostedFile.FileName); sb.AppendFormat("<br/> File type: {0}", FileUpload1.PostedFile.ContentType); sb.AppendFormat("<br/> File length: {0}", FileUpload1.PostedFile.ContentLength); sb.AppendFormat("<br/> File name: {0}", FileUpload1.PostedFile.FileName); }catch (Exception ex) { sb.Append("<br/> Error <br/>"); sb.AppendFormat("Unable to save file <br/> {0}", ex.Message); } } else { lblmessage.Text = sb.ToString(); }}Pay attention to the following issues:
The StringBuilder class is generated from the System.IO namespace, so it should be included.
The try and catch areas are used to catch errors and display error messages.