file

< html‎ | elements‎ | input‎ | type
Jump to: navigation, search

file

Merge Candidate: This page is a candidate for merge with the following pages: [[html/attributes/type]]

W3C Recommendation

Summary

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


Overview Table

DOM Interface HTMLInputElement

Examples

[This example uses HTML code to submit a file selected by the user to Cpshost.dll, which is installed with Posting Acceptor. View live example]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.

HTML
<!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>

The following examples use the INPUT type=file element to upload a file to a server. The first example requires Microsoft Posting Acceptor, which can be used with IIS or Personal Web Server.

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

This example shows the Active Server Page (ASP) content of Repost.asp. Notice that the properties of the uploaded file are accessible from the submitted form.

<%@ LANGUAGE = JScript %>
<%
   Response.buffer=true;
%>
<html>
<title>Repost Example</title>
<body>
<h1>Upload Status</h1>
<p> 
Destination: <b><% Response.Write(Server.HTMLEncode(Request.Form("TargetURL"))) %></b> 
</p> 
<% 
   Response.write("<P>Name: " + Server.HTMLEncode(Request.Form("FileName")) + "</P>"); 
   Response.write("<P>Size: " + Server.HTMLEncode(Request.Form("FileSize")) + "</P>"); 
   Response.write("<P>Path: " + Server.HTMLEncode(Request.Form("FilePath")) + "</P>"); 
%> 
</body>
</html>

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.

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. {

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 1.0
1.0
3.02
1.0
1.0

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support ?
?
18
?
Unsupported
?
?
iOS6


Compatibility notes

Browser Version Note
Google Chrome 21+ 'files' IDL attribute is writable.

See also

Related pages (MSDN)

  • input

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]