on select get size height and width for multiple images by jquery

Question

I am using below code now i want to this for multiple image

var _URL = window.URL || window.webkitURL;
    $("#logo_img").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            alert(this.width + " " + this.height);
        };
        img.src = _URL.createObjectURL(file);
     }
   });

Here is HTML

<form action="ajax/product_images" id="uploadForm1" method="post" enctype="multipart/form-data"> 
    <input type="file" name="files[]" accept="image/*" multiple="multiple" id="logo_img" onchange='openFile(event)' onChange="validate(this.value)" />                    
    <input type="hidden" value="2" id="upload_id" name="upload_id" /> 
    <input type="submit" name="submit" id="save" class="btn btn-default" style="float:right;" value="Upload"/>
</form>

Answer 1

You can do this with a for -loop:

 var _URL = window.URL || window.webkitURL; $("#logo_img").change(function(e) { for(var i = 0; i < this.files.length; i++) { var file = this.files[i]; var img = new Image(); img.onload = function() { console.log(this.width + " " + this.height); }; img.src = _URL.createObjectURL(file); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="ajax/product_images" id="uploadForm1" method="post" enctype="multipart/form-data"> <input type="file" name="files[]" accept="image/*" multiple="multiple" id="logo_img" /> <input type="hidden" value="2" id="upload_id" name="upload_id" /> <input type="submit" name="submit" id="save" class="btn btn-default" style="float:right;" value="Upload" /> </form>