倍数ファイル入力から画像の幅と高さを取得する方法は？

Question

JavascriptまたはJQueryで複数の入力ファイルからそれぞれの画像の幅と高さを取得したいとします。私はGoogleで検索し、多くの方法を試しましたが、私はそれを行う方法を見つけることができません。ここで

は私のコードです：ここでは

<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" /> 

は私の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; 
} 

Answer 1

あなたはこれで、複数の画像ファイルのアップロード用の画像の幅と高さを取得しようとすることができます

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