How to allow input type=file to accept only image files?
Use the accept attribute of the input tag. To accept only PNG's, JPEG's and GIF's you can use the following code:
<label>Your Image File
<input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
</label>
how to validation the input (type=file) by javascript for upload images only?
You need to reset the input
in addition to alerting the user:
let file = document.getElementById("fileName");function validateFileType(){ var fileName = file.value, idxDot = fileName.lastIndexOf(".") + 1, extFile = fileName.substr(idxDot, fileName.length).toLowerCase(); if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){ //TO DO }else{ alert("Only jpg/jpeg and png files are allowed!"); file.value = ""; // Reset the input so no files are uploaded }}
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()">
jQuery - INPUT type=File , Image FileType Validation options?
You want to check what the value of the element is, something along the lines of:
$("#user_profile_pic").change(function() {
var val = $(this).val();
switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
case 'gif': case 'jpg': case 'png':
alert("an image");
break;
default:
$(this).val('');
// error message here
alert("not an image");
break;
}
});
Edit
Code changed based on comment - now removes the value of the selected file if not an image.
Limit file format when using input type=file?
Strictly speaking, the answer is no. A developer cannot prevent a user from uploading files of any type or extension.
But still, the accept attribute of <input type = "file">
can help to provide a filter in the file select dialog box of the OS. For example,
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />
Validation of file extension before uploading file
It's possible to check only the file extension, but user can easily rename virus.exe to virus.jpg and "pass" the validation.
For what it's worth, here is the code to check file extension and abort if does not meet one of the valid extensions: (choose invalid file and try to submit to see the alert in action)
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"]; function Validate(oForm) { var arrInputs = oForm.getElementsByTagName("input"); for (var i = 0; i < arrInputs.length; i++) { var oInput = arrInputs[i]; if (oInput.type == "file") { var sFileName = oInput.value; if (sFileName.length > 0) { var blnValid = false; for (var j = 0; j < _validFileExtensions.length; j++) { var sCurExtension = _validFileExtensions[j]; if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) { blnValid = true; break; } } if (!blnValid) { alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", ")); return false; } } } } return true;}
<form onsubmit="return Validate(this);"> File: <input type="file" name="my file" /><br /> <input type="submit" value="Submit" /></form>
Related Topics
How to Open a Link in New Tab Using Angular
Disable Certain Dates from Html5 Datepicker
How to Prevent Newline At the End of HTML Input Field
How to Position Elements Next to Each Other in a Div
Zoom to Fit: Pdf Embedded in HTML
Create an Object for Google Chrome
How to Modify the Primeng P-Calendar Style
Two Submit Buttons in One Form
Stylesheet Not Loaded Because of Mime-Type
Canvas Width and Height in Html5
How to Make Space Between Two Buttons in Same Div
How to Disable Viewport Zooming on Mobile Safari
Html - How to Scroll Vertical in Select Box
How to Arrange HTML Label and Input Side by Side
Having Difficulty Understanding How to Remove Some Padding
How to Put Arrow Between Two Divs Using HTML and CSS
Why Am I Seeing a 404 (Not Found) Error Failed to Load Favicon.Ico When Not Using This