如何从多个文件输入中获取图像宽度和高度？

Question

我想从Javascript或JQuery中的多个输入文件中获取每个图像的宽度和高度。我在谷歌搜索和尝试了很多方法，但我找不到办法。

这里是我的代码：

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