如何在上传前检查图像的宽度和高度

Question

对于图片上传，我编写了以下 html 代码：

<input type="file" id="upload" class="im" onchange="fileSelectHandlerProfile('defaultProfile','true')" style="cursor:pointer"/>

当我们完成选择图像时，

此代码将被触发：

function fileSelectHandlerProfile(title, defalutProfile) {
    var oFile;
    oFile = $('#thumbUploadProfile')[0].files[0];
    var rFilter = /^(image\/jpeg|image\/png|image\/gif|image\/bmp|image\/jpg|image\/pjpeg)$/i;
    if (!rFilter.test(oFile.type)) {
        $('.errorProfile').html('Please select a valid image file (jpg and png are allowed)').show();
    }
}

我想检查 oFile 的宽度和高度，怎么可能像 oFile.type？

Answer 1

一个解决方案是在客户端加载它并检查高度和宽度。

function fileSelectHandlerProfile(title, defalutProfile) {
var oFile;
oFile = $('#thumbUploadProfile')[0].files[0];
var rFilter = /^(image\/jpeg|image\/png|image\/gif|image\/bmp|image\/jpg|image\/pjpeg)$/i;
if (!rFilter.test(oFile.type)) {
    $('.errorProfile').html('Please select a valid image file (jpg and png are allowed)').show();
}

var picReader = new FileReader();

picReader.addEventListener("load", function (event) {

    var imageObj = new Image();
    imageObj.src = event.target.result;
    imageObj.onload = function () {
        //TEST IMAGE SIZE
        if (imageObj.height < 100 || imageObj.width < 100) {
            $('.errorProfile').html('Please select an image with correct dimensions').show();
        }
    };
});

//Read the image
picReader.readAsDataURL(oFile);

}