input tags are often used in projects to upload files, which are usually picture files. Pictures have many formats. We only need several of them. We need to validate the files uploaded by users. There is a new attribute in HTML5: accept file type restriction. But usually we use javascript or jQuery to write methods to verify the size limitation, type judgment and pixel judgment of the image.

<input type="file" name="files" id="file" οnchange="verificationPicFile(this)">

//Picture Type Verification
function verificationPicFile(file) {
    var fileTypes = [".jpg", ".png"];
    var filePath = file.value;
    //When the values in parentheses are 0, empty characters, false, null, undefined, they are equivalent to false.
    if(filePath){
        var isNext = false;
        var fileEnd = filePath.substring(filePath.indexOf("."));
        for (var i = 0; i < fileTypes.length; i++) {
            if (fileTypes[i] == fileEnd) {
                isNext = true;
                break;
            }
        }
        if (!isNext){
            alert('Do not accept this file type');
            file.value = "";
            return false;
        }
    }else {
        return false;
    }
}

//Picture size verification
function verificationPicFile(file) {
    var fileSize = 0;
    var fileMaxSize = 1024;//1M
    var filePath = file.value;
    if(filePath){
        fileSize =file.files[0].size;
        var size = fileSize / 1024;
        if (size > fileMaxSize) {
            alert("File size should not be greater than 1 M!");
            file.value = "";
            return false;
        }else if (size <= 0) {
            alert("File size cannot be 0 M!");
            file.value = "";
            return false;
        }
    }else{
        return false;
    }
}

//Picture size verification
function verificationPicFile(file) {
    var filePath = file.value;
    if(filePath){
        //Read picture data
        var filePic = file.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            //Loading Pictures to Get the Real Width and Height of Pictures
            var image = new Image();
            image.οnlοad=function(){
                var width = image.width;
                var height = image.height;
                if (width == 720 | height == 1280){
                    alert("Document size is in line!");
                }else {
                    alert("File size should be 720*1280!");
                    file.value = "";
                    return false;
                }
            };
            image.src= data;
        };
        reader.readAsDataURL(filePic);
    }else{
        return false;
    }
}

--------
Copyright Statement: This is the original article of CSDN blogger "Serenade Not Understanding", which follows CC 4.0 BY-SA Copyright Agreement. Please attach the link of origin and this statement for reproducing.
Links to the original text: https://blog.csdn.net/qq_39200924/article/details/79198766