업로드하기 전에 이미지 크기/크기를 확인하십시오.

Question

이 기능을 사용하여 이미지의 크기를 어떻게 확인할 수 있습니까? 업로드하기 전에 확인하고 싶습니다 ...

$("#LINK_UPLOAD_PHOTO").submit(function() { 
    var form = $(this); 
    form.ajaxSubmit({ 
     url: SITE_URL + 'functions/_app/execute/link_upload_photo.php', 
     dataType: 'html', 
     beforeSubmit: function() { 
    //CHECK DE IMAGE DIMENSIONS, SIZE, AND SHOW ERRORS 
     }, 
     uploadProgress: function (event, position, total, complete) { 
      $(".j_progressbar").fadeIn(); 
      $(".j_progressbar .bar").width(complete + "%"); 
     }, 
     success: function (data) { 
      $("#PHOTO_UPLOADED").css("background-image","url("+window.URL.createObjectURL(document.getElementById('ADD_FIGURE').files[0])+")"); 
      $("#PHOTO_UPLOADED").css("background-size","462px"); 
      $("#UPLOAD_STATUS").css("opacity", "0.5"); 
      $("#UPLOAD_STATUS").css("-moz-opacity", "0.5"); 
      $("#UPLOAD_STATUS").css("filter", "alpha(opacity=50)"); 
      $(".j_progressbar").hide(); 
      $(".ADD_FIGURE").attr("rel",data); 
     } 
    }); 
    return false; 
}); 

고맙습니다.

Answer 1

.naturalWidth & .naturalWidth HTMLImageElement의 읽기 전용 속성 사용에 대해서는 the docs을 참조하십시오.

var x = document.getElementById("myImg").naturalWidth; 
 

 
function myFunc() { 
 
    var x = document.getElementById("myImg").naturalWidth; 
 
    var y = document.getElementById("myImg").naturalHeight; 
 
    alert(x + "X" + y); 
 
}

<img id="myImg" src="http://www.w3schools.com/jsref/compman.gif" style="width:500px;height:98px;"> 
 
<button onclick=myFunc()>GET DETAILS</button>