How to get Image width and height from Multiples Files input?

Question

I want to get each of images width and height from multiple input files in Javascript or JQuery. I search in google and tried many ways, but I can't found the way to do it.

Here is my code:

<input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile" style="display: none !important;" />

<input type="button" class="btn submit-btn" value="ファイル追加" onclick="document.getElementById('uploadBtn').click();" style="float: right;"/>

<input id="filename" type="hidden" />

Here is my Javascript:

<script>
    document.getElementById("uploadBtn").onchange = function() {
      document.getElementById("uploadFile").value = this.value;
    };

    document.getElementById('uploadBtn').onchange = uploadOnChange;

    function uploadOnChange() {
       var filename = this.value;
       var lastIndex = filename.lastIndexOf("\\");
       if (lastIndex >= 0) {
          filename = filename.substring(lastIndex + 1);
       }
       var files = $('#uploadBtn')[0].files;
       for (var i = 0; i < files.length; i++) {
(function(i) {

    var extension = filename.split('.').pop();
    if (extension == 'pdf')
    {
        $("#upload_prev").append('<div><span><br><div class="col-md-10"><span class="uploadFiles">' + '<a href="">' + files[i].name + '</a>' + '</span><br><label class="filelink"></label></div><div class="col-md-2"><p class="close" style="font-size: 13pt;">削除</p><br></div></span></div>');
    }

    else if (extension == 'jpg' || extension == 'jpeg' || extension == 'png' || extension == 'gif')
    {
        $("#upload_prev").append('<div><span><br><div class="col-md-10"><span class="uploadFiles">' + '<a href="">' + files[i].name + '</a>' + '</span><br><label class="filelink"></label></div><div class="col-md-2"><p class="close" style="font-size: 13pt;">削除</p><br></div></span></div>');


    }
    else
    {
        $("#upload_prev").append('<div><span><br><div class="col-md-10"><span class="uploadFiles">' + files[i].name + '</a>' + '</span><br><label class="filelink"></label></div><div class="col-md-2"><p class="close" style="font-size: 13pt;">削除</p><br></div></span></div>');
    }

  $("#upload_prev a:contains(" + files[i].name + ")")
    .on("click", function(e) {
            e.preventDefault();

            var extension = filename.split('.').pop();
            if (!/(pdf)$/ig.test(extension))
            {   
                $('#imgPreview').modal('show');
                $("#imgPreviewLabel").text(files[i].name)
                    var close = $('#imgPreview').closest("div")
                    .find(".filelink");

                    close.append(
                  $('<img>', {
                    src: URL.createObjectURL(files[i])
                  }).width('100%').height('100%')
                )
            }
            else if (extension == 'pdf')
            {
                $('#pdfPreview').modal('show');
                $("#pdfPreviewLabel").text(files[i].name)
                var close = $('#pdfPreview').closest("div")
                    .find(".filelink");
                close.append(
                    $('<iframe>', {
                        src: URL.createObjectURL(files[i])
                    }).width('565px').height('400px')
                )
            }
        })
        $(".modal_close").on("click", function(e){
            $("#filelink img").remove();
            $("#filelink iframe").remove();
        })
        $('#imgPreview').on('hidden.bs.modal', function () {
            $("#filelink img").remove();
            $("#filelink iframe").remove();
        })
        $('#pdfPreview').on('hidden.bs.modal', function () {
            $("#filelink img").remove();
            $("#filelink iframe").remove();
        })
      })(i);
   }
    document.getElementById('filename').value = filename;
 }

Possible duplicate of [Sort by image resolution in gallery](http://stackoverflow.com/questions/42540903/sort-by-image-resolution-in-gallery) — Kaiido, May 05 '17 at 04:20

score 0 · Answer 1 · edited May 05 '17 at 08:35

You can try to get image width and height for multiple uploaded image files with this:

var _URL = window.URL || window.webkitURL;
$("#uploadBtn").change(function(e) {
    var file, img;
for(var i=0; i<this.files.length; i++){
if ((file = this.files[i])) {
    img = new Image();
    img.onload = function() {
        alert("width:"+this.width + " " + "height:" + this.height);
    };
    img.onerror = function() {
        alert( "not a valid file: " + file.type);
    };
    img.src = _URL.createObjectURL(file);
}
}
});

How to get Image width and height from Multiples Files input?

1 Answers1