How to Customize the Validation of Input Type File Image

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>