js获取上传图片大小,判断上传图片类型,获取图片真实宽度和高度

html部分

<div class="form-group  col-md-12">
    <label class="col-md-2 text-right" for="name">預覽圖片</label>
    <div class=" col-md-8">
        <input type="file" name="img" accept="image/*" id="image-id">
    </div>
</div>
<div class="form-group  col-md-12">
    <label class="col-md-2 text-right" for="name">福利圖片</label>
    <div class=" col-md-8">
        <input type="file" name="imgs" accept="image/*" id="images-id">
    </div>
</div>

js部分

//判斷上傳圖片格式
var imgtype = testImgType("image-id");
if(!imgtype) { toastr.warning('預覽圖片格式不正確'); return false; }
var imgstype = testImgType("images-id");
if(!imgstype) { toastr.warning('福利圖片格式不正確'); return false; }

//判斷上傳圖片大小
var imgfile=document.getElementById("image-id");
var imgbool = testMaxSize(imgfile,1048576)?testMaxSize(imgfile,1048576):'';
if(!imgbool){
    toastr.warning('預覽圖片過大,請上傳小於1M的圖片');
    return false;
};
var imgsfile=document.getElementById("images-id");
var imgsbool = testMaxSize(imgsfile,1048576)?testMaxSize(imgsfile,1048576):'';
if(!imgsbool){
    toastr.warning('福利圖片過大,請上傳小於1M的圖片');
    return false;
};

函數部分

function testImgWidthHeight(img, w,h,callback){
    var input = document.getElementsByName('img');
    if(input.files){
        //读取图片数据
        var f = input.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            //加载图片获取图片真实宽度和高度
            var image = new Image();
            image.onload=function(){
                var width = image.width;
                var height = image.height;
                if (width != w || height != h) {
                    //隐藏
                    input.value="";
                    callback && callback(false);
                } else {
                    callback && callback(true);
                }
            };
            image.src= data;
        };
        reader.readAsDataURL(f);

    }else{
        var image = new Image();
        image.onload =function(){
            var width = image.width;
            var height = image.height;
            var fileSize = image.fileSize;
            alert(width+'===2==='+height+"====="+fileSize);
        }
        image.src = input.value;
    }
}
/**
 *文件大小
 * @param fileData
 * @param Max_Size 限制圖片大小
 * @returns {boolean}
 */
function testMaxSize(fileData,Max_Size){
    var isAllow=false;
    var size = fileData.files[0].size;
    isAllow = size <= Max_Size;
    if(!isAllow){
        return false;
    }
    return isAllow;
}
/**
 * 判断图片类型
 * @param eventId 圖片id
 * @param gif|jpg|jpeg|png|GIF|JPG|PNG
 * @returns {boolean}
 */
function testImgType(eventId) {
    var tmpFile = document.getElementById(eventId);
    if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(tmpFile.value)) {
        tmpFile.value= "";//清空上傳圖片
        return false;
    }
    return true;
}