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

【问题标题】：How to check image width and height before upload如何在上传前检查图像的宽度和高度
【发布时间】：2014-12-13 06:11:49
【问题描述】：

对于图片上传，我编写了以下 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？

【问题讨论】：

正如 Merlin 回答的那样，您可以验证并将其与 JQuery 表单验证集成试试这个sgeek.org/validate-image-dimension-using-jquery

标签： javascript jquery css

【解决方案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);

}

【讨论】：

2019年最佳解决方案之一

【解决方案2】：

您可以分两步完成：

使用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

现在通过创建Image 对象来读取图像大小，其中dataUrl 为src。

详情：JS - get image width and height from the base64 code

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：