Languages
[Edit]
EN

HTML - file input

0 points
Created by:
Marley-Marks
442

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

Quick solution:

// ONLINE-RUNNER:browser;

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

 

Practical example

In this example, we create file input using type="file" attribute. Additionally, we create it as an image picker using accept attribute that defines the file types the file input should accept.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <label>
    <span>Choose a picture:</span>
    <input type="file"
           name="picture"
           accept="image/png, image/jpeg">
  </label>
</body>
</html>

Note:

You can specify the string meaning any image file in the following way:

  • image/*

The same solution works for audio and video:

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

References

  1. <input type="file"> - HTML | MDN

HTML - input element types

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join