배수 파일 입력에서 이미지 너비 및 높이를 얻는 방법은 무엇입니까?

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

내 자바 스크립트입니다 : 여기

내 코드입니다

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