проверить ширину изображения с помощью JavaScript для нескольких загрузок файлов

Question

У меня проблема с проверкой высоты и ширины при загрузке нескольких изображений нет опции для проверки высоты и ширины для файла изображения, используя:

document.getElementById('id').files;

Поэтому мне нужна помощь, чтобы проверить высоту и ширину нескольких загруженных изображений с помощью JavaScript

Answer 1

Функция для получения ширины и высоты изображения из объекта 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);
};

Например, если вход для загрузки файла имеет идентификатор «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);
  });
}

Примечание: не обязательно печатать размеры изображений в порядке их заказа!

Answer 2

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