HtmlInputFile Server Control Declarative Syntax

  • Article

Creates a server-side control that maps to the <input type=file> HTML element and allows you to upload a file to the server.

<input
    Type="File"
    EnableViewState="False|True"
    Id="string"
    Visible="False|True"
    OnDataBinding="OnDataBinding event handler"
    OnDisposed="OnDisposed event handler"
    OnInit="OnInit event handler"
    OnLoad="OnLoad event handler"
    OnPreRender="OnPreRender event handler"
    OnUnload="OnUnload event handler"
    runat="server"
    />

Remarks

Use the HtmlInputFile control to program against the HTML <input type=file> element. You can use the HtmlInputFile control to design a page that allows users to upload binary or text files from a browser to a directory that you designate on your Web server. File upload is enabled in all HTML 3.2 and later Web browsers.

Example

The following example demonstrates a simple file upload scenario. The first section of code defines the event handler for the page. When the user clicks the Upload button on the form, the file name, content length, and amount of content (in bytes), are displayed on the page, while the file itself is uploaded to the UploadedFiles directory on the server.

Note

You must set the enctype attribute of the form to "multipart/form-data".

The code for the form implements an HtmlForm control, an HtmlInputFile control, an HtmlInputButton control, and four HtmlGenericControls (the <div> element and the three <span> elements, each with runat="server" attribute/value pairs in their opening tags).

Note

To view information about the uploaded file on the page, the Visible property, which the HtmlGenericControl inherits from the Control class, must be set to true in the event-handler code.

<%@ Page Language="VB" AutoEventWireup="True" %>
<!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>
<title>HtmlInputFile Control</title>
</head>

   <script runat="server">
      Sub UploadBtn_Click(Sender as Object, e as EventArgs)

         ' Display information about posted file
         FileName.InnerHtml = MyFile.PostedFile.FileName
         MyContentType.InnerHtml = MyFile.PostedFile.ContentType 
         ContentLength.InnerHtml = cStr(MyFile.PostedFile.ContentLength)
         FileDetails.Visible = True

         ' Save uploaded file to server
         MyFile.PostedFile.SaveAs("c:\Uploadedfiles\uploadfile.txt")
      End Sub
   </script>

   <body>
      <form id="Form1" action="fileupload.aspx" 
            method="post"
            enctype="multipart/form-data" 
            runat="server">

         <h1>ASP.NET File Upload Example</h1>
         Select File To Upload to Server: 
         <input id="MyFile" 
                type="file" 
                runat="server" /> 
         <br /><br />
         <input id="Submit1" type="submit" 
                value="Upload!"
                onserverclick="UploadBtn_Click" 
                runat="server" />
         <br /><br /><br />
         <div id="FileDetails" 
              visible="false" 
              runat="server">
            FileName: <span id="FileName" runat="server"/> <br />
            ContentType: <span id="MyContentType" runat="server"/> <br />
            ContentLength: <span id="ContentLength" runat="server"/>bytes
            <br />
         </div>
      </form>
   </body>
</html>

<%@ Page Language="C#" AutoEventWireup="True" %>
<!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>
<title>HtmlInputFile Control</title>
</head>

   <script runat="server">
      void UploadBtn_Click(Object sender, EventArgs e)
      {
         // Display information about posted file
         FileName.InnerHtml = MyFile.PostedFile.FileName;
         MyContentType.InnerHtml = MyFile.PostedFile.ContentType; 
         ContentLength.InnerHtml =
                               MyFile.PostedFile.ContentLength.ToString();
         FileDetails.Visible = true;

         // Save uploaded file to server
         MyFile.PostedFile.SaveAs("c:\\Uploadedfiles\\uploadfile.txt");
      }
   </script>

   <body>
      <form id="Form1" action="fileupload.aspx" 
            method="post"
            enctype="multipart/form-data" 
            runat="server">

         <h1>ASP.NET File Upload Example</h1>
         Select File To Upload to Server: 
         <input id="MyFile" 
                type="file" 
                runat="server" /> 
         <br /><br />
         <input id="Submit1" type="submit" 
                value="Upload!"
                onserverclick="UploadBtn_Click" 
                runat="server" />
         <br /><br /><br />
         <div id="FileDetails" 
              visible="false" 
              runat="server">
            FileName: <span id="FileName" runat="server"/> <br />
            ContentType: <span id="MyContentType" runat="server"/> <br />
            ContentLength: <span id="ContentLength" runat="server"/>bytes
            <br />
         </div>
      </form>
   </body>
</html>

See Also

Reference

HtmlInputFile

Other Resources

HTML Server Controls