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

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

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

---

我想检查文件的宽度和高度，如何才能像文件一样。键入？

您可以通过两个步骤完成：

使用html5文件api以数据url的形式读取图像文件内容：

var reader=newfilereader（）；
reader.onloadend=函数（）{
//var dataUrl=reader.result；
//按照此处的步骤2进行编码。。。
}
reader.readAsDataURL（oFile）；
//参考：https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL

现在通过创建数据URL为src的

image

对象来读取图像大小

详情：

---

允许您使用

FileReader.readAsDataURL

将文件作为

数据：

url读取。使用该url作为

标记的

src

属性，并读取该图像的

宽度

和

高度

属性。

解决方案是将其加载到clienside并检查高度和宽度

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

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

函数文件SelectHandlerProfile（标题，默认配置文件）{
文件变量；
oFile=$（'#thumbUploadProfile'）[0]。文件[0]；
var rFilter=/^（image\/jpeg | image\/png | image\/gif | image\/bmp | image\/jpg | image\/pjpeg）$/i；
if（！rFilter.test（文件类型））{
$（'.errorProfile'）.html（'请选择一个有效的图像文件（允许使用jpg和png）'）。show（）；
}
var picReader=new FileReader（）；
picReader.addEventListener（“加载”，函数（事件）{
var imageObj=新图像（）；
imageObj.src=event.target.result；
imageObj.onload=函数（）{
//测试图像大小
如果（图像对象高度<100 | |图像对象宽度<100）{
$（'.errorProfile'）.html（'请选择尺寸正确的图像'）.show（）；
}
};
});
//阅读图片
picReader.readAsDataURL（oFile）；

---

}

正如Merlin回答的那样，您可以验证并将其与JQuery表单验证集成。2019年，您可以尝试这一最佳解决方案

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