HTML - file input

2 contributors

7 contributions

0 discussions

3 points

Created by:

Marley-Marks

712

In this article, we would like to show you how to use the file input element in HTML.

Quick solution:

<input type="file" />

or:

<input type="file" accept=".pdf,.doc,.docx" />

or:

<input type="file" accept="image/png, image/jpeg" />

Practical example

In this example, we create file input using type="file" attribute.

Using accept attribute, file input opens dialog that displays only expected file types.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <label>
    <span>Choose file:</span>
    <input type="file" id="file" />
  </label>
  <br />
  <label>
    <span>Choose document:</span>
    <input type="file" id="document" accept=".pdf,.doc,.docx" />
  </label>
  <br />
  <label>
    <span>Choose picture:</span>
    <input type="file" id="picture" accept="image/png, image/jpeg" />
  </label>
</body>
</html>

Note:

You can specify any image type in accept attribute using:

image/*

The same solution works for audio and video:

audio/* - any audio file,
video/* - any video file.