使用 JavaScript 检查图像的高度宽度以进行多个文件上传

Question

>我在检查上传多个图像的高度和宽度时遇到问题 没有使用以下方法检查图像文件的高度和宽度的选项：

document.getElementById('id').files;

所以我需要帮助使用 JavaScript 检查多个上传图像的高度和宽度

Answer 1

//html 代码

<input type='file' name='images[]' id='image' multiple>

//JavaScript 代码

$("#image").change(function () {
var this_image = $(this);
var img = document.getElementById('image').files;
var img_len = img.length;
for(var i=0;i<img_len;i++)
{
var this_img = document.getElementById('image').files[i];
var reader = new FileReader();
//Read the contents of Image File.
reader.readAsDataURL(document.getElementById('image').files[i]);
reader.onload = function (e) {
//Initiate the JavaScript Image object.
var image = new Image();
//Set the Base64 string return from FileReader as source.
image.src = e.target.result;
//Validate the File Height and Width.
image.onload = function () {
var height = this.height;
var width = this.width;
console.log(height+"---"+width);
};
}
});

Answer 2

用于从 File 对象获取图像宽度和高度的函数：

function getImageSize(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.onload = function(e2) {
callback(img.width, img.height);
}
img.src = e.target.result;
};
reader.readAsDataURL(file);
};

例如，如果文件上传输入的 ID 为"inputFile"，则以下代码将向控制台打印其所有图像的大小：

var files = document.getElementById('inputFile').files;
for (var i = 0; i < files.length; i++) {
getImageSize(files[i], function(width, height) {
console.log('Image: Width = ' + width + ', height = ' + height);
});
}

注意：它不一定会按顺序打印图像大小！