input (type=file) element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The input element, having the "file" value in its type attribute, represents a control to select a list of one or more files to be uploaded to the server. When the form is submitted, the selected files are uploaded to the server, along with their name and type.

For the selected files to be properly uploaded to the server, the value "multipart/form-data" must be present in the form's enctype attribute, or in the formenctype attribute of the button used to submit the form.

When the boolean attribute multiple is present, users may select more than one file to be uploaded to the server.

The accept attribute may be used in this element to give a hint to the browser about what types of files the user should be able to submit. With this information, the browser may set restrictions about the files a user can pick or provide extended functionalities for specific types of files, like for example, allowing the capture of a picture with the webcam when the allowed types are of images.

Authors shouldn't rely on the accept attribute as a strict method of restraining the user input. When browsers don't support the mechanism or the files have their extensions altered this check may fail. Server-side checks should always be performed.

Examples

In our first example we'll set up a form with a single file input, where you'll be able to test the performance of the control with a real file upload. Note that the form has the enctype attribute correctly set up to "multipart/form-data", as needed for file uploads.

Note: please choose small files (under 300KB) or the upload time may become considerable. Files greater than 2MB won't be uploaded.

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Upload a file:
    <input type="file" name="uploadedfile">
    <input type="submit" value="Send data">
  </p>
</form>

Upload a file:

It's time to try uploading multiple files. This example will be exactly as the one before with the execption that the multiple attribute will be present in the file input, and its name atribute will have a couple of square brackets ("[]") in the end. Both conditions are required to implement a successful multiple file upload.

Note: please, try not to upload a big number of files and keep their sizes small (under 300KB) or the upload time may become considerable. Files greater than 2MB won't be uploaded.

Browser support for multiple file uploads is incomplete, specially among mobile devices. For full compatibility, authors may need to rely on scrips.

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Upload files:
    <input type="file" name="uploadedfiles[]" multiple>
    <input type="submit" value="Send data">
  </p>
</form>

Upload files:

Now we'll implement a single file upload with some restrictions about the file type, using the accept attribute in the file input. The accept attribute takes a comma separated list with any of the following: an Internet media type; file extensions (like ".jpg" or ".pdf"); the strings "audio/*", "video/*" and "image/*" representing sound, video and image files, respectively. It provides the browsers with a hint about what type of files the author expects to receive in this control. Supporting browsers will usually restrict the type of files that can be selected to the ones specified in this attribute.

Authors shouldn't rely on the accept attribute as a strict method of restraining the user input. When browsers don't support the mechanism or the files have their extensions altered this check may fail. Server-side checks should always be performed.

To improve compatibility, authors are encouraged to provide multiple references (with Internet media types and extensions) of a file type, whenever possible.

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Upload an image:
    <input type="file" name="uploadedimage" accept="image/png, .jpeg, .jpg, image/gif">
    <input type="submit" value="Send data">
  </p>
</form>

Upload an image:

Attributes

Specific attributes

accept

A comma separated list with any of the following: an Internet media type; file extensions (like ".jpg" or ".pdf"); the strings "audio/*", "video/*" and "image/*" representing sound, video and image files, respectively. This attribute provides the browsers with a hint about what type of files the author expects to receive in this control. Supporting browsers will usually restrict the type of files that can be selected to the ones specified in this attribute.

Authors shouldn't rely on the accept attribute as a strict method of restraining the user input. When browsers don't support the mechanism or the files have their extensions altered this check may fail. Server-side checks should always be performed.

To improve compatibility, authors are encouraged to provide multiple references (with Internet media types and extensions) of a file type, whenever possible.

Example

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Upload a document:
    <input type="file" name="uploadeddocument" accept="application/pdf, .doc, .docx, .odf">
    <input type="submit" value="Send data">
  </p>
</form>

Upload a document:

autofocus

A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog where the control finds itself is shown. If the attribute has the value "autofocus" or the empty string (""), or if it's just present, the control should get the focus as soon as possible, after the page or dialog has been loaded.

Example

<p><input type="file" name="uploadedfile" autofocus></p>

disabled

A boolean value indicating wether the control is disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the control will be disabled.

Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form is submitted.

Example

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Upload a file:
    <input type="file" name="uploadedfile" disabled>
    <input type="submit" value="Send data">
  </p>
</form>

Upload a file:

form

The value of the id attribute of the form with which this control is associated to.

This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.

Example

<p>Upload a file: <input type="file" name="uploadedfile" form="form1"><p>
<form id="form1" action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p><input type="submit" value="Send data"></p>
</form>

Upload a file:

multiple

A boolean value indicating whether the control should accept the selection of more than one file at a time. If the attribute has the value "multiple" or the empty string (""), or if it's just present, the control should allow users to pick more than one file at a time.

When the multiple attribute is present, any given name for the control must be followed by an opening and closing square brackets ("[]") for the multiple upload to work properly.

Example

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Files to upload:
    <input type="file" name="uploadedfiles[]" multiple>
    <input type="submit" value="Send data">
  </p>
</form>

Files to upload:

name

A name for the control. This name will be sent by the browser to the processing agent, and will identyfy the file and its relevant information, server-side.

Currently, the value isindex, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.

When the multiple attribute is present, any given name for the control must be followed by an opening and closing square brackets ("[]") for the multiple upload to work properly.

Example

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    File to upload:
    <input type="file" name="uploadedfile">
    <input type="submit" value="Send data">
  </p>
</form>

File to upload:

required

A boolean value indicating wether this control can be left empty or not. If this attribute has the value "required" or the empty string (""), or if it's just present, the user will have to select a file for this the control in order to be able to submit the form.

Browser support for the attribute required is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

Example

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Profile picture:
    <input type="file" name="profilepicture" required>
    <input type="submit" value="Send data">
  </p>
</form>

Profile picture:

type

A value indicating the type of the field that this element represents. There are twenty two possible values (case-insensitive):

  • hidden: a hidden control used to send information to the server, typically managed by scripts.
  • text: a control used to input a single-line piece of text.
  • search: same as text but for search purposes.
  • tel: a control used to provide a telephone number.
  • url: a text box used to input a single and absolute URL.
  • email: a control designed to edit one or more e-mail addresses.
  • password: a text box for editing passwords, where the characters are represented by dots.
  • date: a control to input a specific date.
  • month: a control to input a specific month.
  • week: a control to input a specific week.
  • time: a control to input a specific time.
  • datetime-local: a control to input a specific local date and time.
  • number: a control to input a number.
  • range: a control to input one or two numbers inside a range.
  • color: a control to input a color.
  • checkbox: a control to input a boolean value (true/false).
  • radio: a control used to choose one single option among many.
  • file: a control used to upload files to the server.
  • submit: a button used to submit the form.
  • image: same as submit but with the ability to be shown as an image instead of using the default button appearance.
  • reset: a button used to reset the form's controls to their default values.
  • button: a button with no default action associated.

When this attribute isn't present, the element behaves as it would have the value "text".

Example

<input type="file" name="uploadedfile">

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.