PUBLISHED ON: AUGUST 27, 2021
How to limit file upload to be only images in HTML?
We can upload text, images, videos in HTML. But there are situations where we need to upload only images. We can limit the file upload to images only in HTML.
To do this we need to use the HTML accept attribute.
HTML accept attribute
The HTML accept attribute specifies the type of input file that a server can accept. This attribute can only be used with the <input> element with <input type="file">.
This attribute is not used as a validation tool. So the uploaded file should be validated along the server-side.
Limit the file upload to be only images
To limit the file uploaded to be only images use accept="image/*" attribute. See the below example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
</head>
<body>
<h2> select only image </h2>
<form action="/form/submit" method="post">
<input type="file" name="Image" accept="image/*">
<input type="submit">
</form>
</body>
</html>
Output
Here is the output of the above program.
Conclusion
The image/* value accepts only the images with any format like .jpeg, png, jpg, etc. We can add the accept attribute with the image/* attribute to limit the file upload to only images.
