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

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

解决方案是将其装入clienside并检查高度和宽度。

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);

}

Answer 2

您可以分两步完成：

1. 使用html5文件api将图像文件内容作为数据URL读取：

var reader  = new FileReader();
reader.onloadend = function () {
    //var dataUrl = reader.result;
    //code as per step 2 here...
}
reader.readAsDataURL(oFile);

//ref: https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL

2. 现在通过使用dataUrl作为src创建Image对象来读取图像大小。

   详细信息： JS-从base64代码获取图像的宽度和高度

Answer 3

FileReader API允许您使用FileReader.readAsDataURL将文件作为data: url读取。 使用该URL作为<img />标记的src属性，并读取该图像的width和height属性。

Answer 4

    var width;
    var height;
    var oFile;
    oFile = $('#thumbUploadProfile')[0].files[0];

    var reader = new FileReader();
    reader.onload = function(e){
        var image = new Image();
        image.onload  = function(){            
            width = img.width;
            height = img.height;
        }
        image.src   = e.target.result;
    };
    reader.readAsDataURL(oFile);