Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Allow the File Input Type to Accept Only Image Files
The <input> tag in HTML creates an input control that accepts user input. Depending on the kind of the attribute, an input field might be of different forms. It is a blank element with only attributes.The <input> tag is typically found within the <form> tag and can be used to represent text fields, checkboxes, dropdowns, buttons, and other inputs by simply setting the appropriate type attribute.
It has many other attributes such as value, placeholder, name, accept, size, height, width etc.
The behaviour of an <input> tag varies greatly depending on the value of its type attribute. The type attribute specifies the type of <input> element to display. It is not a required attribute and hence, if this attribute is not specified, the default type is text.
Syntax
<input type=”value”>
A few values of the type attribute include file, image, email, number, password, submit, button etc.
Input Type: File
The file input type specifies a file selection control. This element is rendered with a button and label, though the appearance varies depending on the browser. The button launches a file selection dialogue, and the label displays the selected filename (s).
We can also add the ‘multiple’ attribute to a file-select field to allow for the selection of multiple files. The syntax is as shown below.
<input type="file">
Attributes of File Input Type
Value: The value attribute of a file input contains a string that represents the path to the selected file (s). If no file has yet been selected, the value is an empty string (""). When the user selects multiple files, the value represents the first file in the list.
Accept : The accept attribute value is a string that specifies which file types should be accepted by the file input. This string is a list of unique file type specifiers separated by commas. Because a given file type can be identified in multiple ways, it's useful to provide a comprehensive set of type specifiers when you need files of a specific format.
Capture: The capture attribute value is a string that specifies which camera will be used for image capture. A value of user indicates that the camera on the user's side should be used. A value of environment specifies the use of an outward-facing camera.
Multiple: The file input allows the user to select more than one file when the multiple Boolean attribute is specified.
When we use <input type="file">, it accepts all file types. However, it is possible to limit the file types to only images or specific image file extensions. This can be accomplished in the following ways:
Using the "accept" Attribute
As we know, The ‘accept’ attribute specifies a filter for what file types the user can pick from the file input dialog box. There are a couple of ways of using this attribute to restrict the file type to only image files.
Example (Restricting the file input type to images)
The following example demonstrates the usage of the ‘accept’ attribute to accept only image files without specifying any extension.
<!DOCTYPE html>
<html>
<head>
<title>How to Allow the File Input Type to Accept Only Image Files</title>
</head>
<body>
<input type="file" id="example1" name="example1" accept="image/*">
</body>
</html>
Example (Restricting the file input type to image Extensions)
The following example demonstrates the usage of the ‘accept’ attribute to accept image files with the specified extensions only.
<!DOCTYPE html>
<html>
<head>
<title>How to Allow the File Input Type to Accept Only Image Files</title>
</head>
<body>
<input type="file" id="example2" name="example2" accept="image/x-png,image/gif,image/jpeg">
</body>
</html>
Or
<!DOCTYPE html>
<html>
<head>
<title>How to Allow the File Input Type to Accept Only Image Files</title>
</head>
<body>
<input type="file" id="example2" name="example2" accept=".png, .jpg, .jpeg" />
</body>
</html>
Using JavaScript Validation
This example makes use of the accept attribute of the input tag along with server side validation to verify if the content is really an expected file type.
Example
<!DOCTYPE html>
<html>
<head>
<title>How to Allow the File Input Type to Accept Only Image Files</title>
</head>
<body>
<body>
<input type="file" id="fileName" name="example3" accept=".jpg,.jpeg,.png,.gif" onchange="validateFileType()" />
<script type="text/javascript">
function validateFileType() {
var fileName = document.getElementById("fileName").value;
var idxDot = fileName.lastIndexOf(".") + 1;
var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
if (extFile == "jpg" || extFile == "jpeg" || extFile == "png" || extFile == "gif") {
//TO DO
} else {
alert("Only jpg, jpeg, png and gif files are allowed!");
}
}
</script>
</body>
</html>
If the selected file does not belong to the specified image extensions, there is a pop up on the screen notifying the user about the valid extensions.
698 Views
