This page is Not Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

file

Summary

The file type of the <input> element represents widget for specifying a file.

Overview Table

DOM Interface
HTMLInputElement

Examples

The following example lets the user choose one or more files, and then displays the choices. The files list can also be used to upload to a website.

<!DOCTYPE html>
<html >
<head>
<title>Files property test</title>
<script type="text/javascript">
  function getFiles() {
    // Get input element
    myFileList = document.getElementById("myfiles");
    // loop through files property, using length to get number of files chosen
    for (var i = 0; i < myFileList.files.length; i++) {
        // display them in the div
        document.getElementById("display").innerHTML += "<br/>" + myFileList.files[i].name ;
    }
  }
</script>
</head>
<body>
<label>Use <strong>shift</strong> or <strong>ctrl</strong> click to pick a few files:
<input type="file" multiple id="myfiles" onchange="getFiles();" /></label>
<div id="display"></div>
</body>
</html>

use the input file type to upload a file to a server

<form name="oForm"
   action="/docs/endpoint"
   enctype="multipart/form-data"
   method="post">
<input type="file" name="oFile1"/>
<input type="submit" value="Upload File">
</form>

Notes

Remarks

For a file upload to take place:

  • The INPUT type=file element must be enclosed within a FORM element.
  • A value must be specified for the NAME attribute of the INPUT type=file element.
  • The METHOD attribute of the FORM element must be set to post.
  • The ENCTYPE attribute of the FORM element must be set to multipart/form-data.

Note For code samples, see Form controls part 1 and Form controls part 2: validation on the Windows Internet Explorer sample site. To handle a file upload to the server, a server-side process must be running that can handle multipart/form-data submissions. For example, the Microsoft Posting Acceptor allows Microsoft Internet Information Server (IIS) to accept file uploads. Additional Common Gateway Interface (CGI) scripts that can handle multipart/form-data submissions are available on the Web.

Windows Internet Explorer 8 and later. When a file is selected by using the input type=file object, the value of the value property depends on the value of the “Include local directory path when uploading files to a server” security setting for the security zone used to display the Web page containing the input object. For more information, see value. Windows Internet Explorer 7 and later. By default, Internet Explorer does not include folder or directory path information when uploading files to sites in the Restricted zone. This improves security by preventing information disclosure. Also, to improve accessibility, the INPUT type=file element now contains two accessible elements—one for the input box and one for the Browse button. This change is applicable only to accessibility tools; script implementations are not affected. Microsoft Internet Explorer 6 for Windows XP Service Pack 2 (SP2) and later. For security reasons, the input type=file element no longer accepts relative file paths. Microsoft Internet Explorer raises an Access Denied exception when the user attempts to submit a form containing an input type=file element that contains a relative path. The INPUT type=file element is available in HTML and script as of Microsoft Internet Explorer 4.0. The file upload add-on is required to use the INPUT type=file element in Microsoft Internet Explorer 3.02. Users can enter a file path in the text box or click the Browse button to browse the file system. When a file is uploaded, the file name is also submitted.

Compatibility notes

Firefox for Android sets a default border on <input type="file"> elements, unlike most other browsers.

Standards information

HTML information

Closing Tag forbidden
CSS Display inline
### Members

The input type=file object has these types of members:

  • [#events Events]
  • [#methods Methods]
  • [#properties Properties]

Events

The input type=file object has these events. {

Attributions