check hight width of image using javascript for multiple file uploads

Question

I am facing problem for checking height and width for multiple images upload there is no option for check height & width for image file using:

document.getElementById('id').files;

So I need help to check height & width of multiple uploaded images using JavaScript

Possible duplicate of [Check image width and height before upload with Javascript](https://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript) — BlackBeard, Jun 28 '18 at 14:22
all other questions are for single image dimension check i want it for multiple images — bharat savani, Jun 28 '18 at 14:24
Then please post the relevant `html` code. It'll encourage more quality answers. — BlackBeard, Jun 28 '18 at 14:27

score 0 · Accepted Answer · answered Jun 28 '18 at 14:35

//html code

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

//javascript code

  $("#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);
                        };
                    }
           });

score 0 · Answer 2 · answered Jun 28 '18 at 14:47

Function for getting image width & height from File object:

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

For example, if the file upload input has the id 'inputFile', the following code will print to the console the size of all its images:

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

Note: it won't necessarily print the images sizes as their order!

check hight width of image using javascript for multiple file uploads

2 Answers2