アップロード画像制限サイズ、タイプ判定、画素判定

プロジェクトではinputラベルを使用してファイルをアップロードすることがよくありますが、これらのファイルは通常、ピクチャファイルです.画像には多くのフォーマットがあります.私たちはその中のいくつかだけを必要とします.ユーザーがアップロードしたファイルを検証する必要があります.HTML 5にはacceptファイルのタイプ制限という新しい属性があります.しかし、通常javascriptやjQueryの作成方法で画像のサイズ制限、タイプ判断、画素判断を検証します.

//      
function verificationPicFile(file) {
    var fileTypes = [".jpg", ".png"];
    var filePath = file.value;
    //        0、   、false 、null 、undefined       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('        ');
            file.value = "";
            return false;
        }
    }else {
        return false;
    }
}

//      
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("        1M！");
            file.value = "";
            return false;
        }else if (size <= 0) {
            alert("       0M！");
            file.value = "";
            return false;
        }
    }else{
        return false;
    }
}

//      
function verificationPicFile(file) {
    var filePath = file.value;
    if(filePath){
        //      
        var filePic = file.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            //               
            var image = new Image();
            image.οnlοad=function(){
                var width = image.width;
                var height = image.height;
                if (width == 720 | height == 1280){
                    alert("      ！");
                }else {
                    alert("      ：720*1280！");
                    file.value = "";
                    return false;
                }
            };
            image.src= data;
        };
        reader.readAsDataURL(filePic);
    }else{
        return false;
    }
}