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

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

使用javascript检查多个文件上传的图像的高宽度

2 个答案: