EN
HTML - file input only for images
3
points
In this article, we would like to show you how to create file input only for images in HTML.
Quick solution:
// ONLINE-RUNNER:browser;
<input type="file" accept="image/*">
or:
// ONLINE-RUNNER:browser;
<input type="file" accept="image/png, image/gif, image/jpeg">
Hint: add more accepted MIME Types if needed.
Practical example
In this example, we create file input using type="file" attribute. To make it allow only images, we set accept attribute to the types that 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/gif, image/jpeg">
</label>
</body>
</html>
Note:
You can also specify the string meaning any image file in the following way:
image/*