변경 SRC

Question

내 HTML 코드에서이 같은 입력 및 img 태그가 :

<input type="file" name="img2" id="chooseimg" onchange="readURL(this);"> 

<img id="img-edt" src="l1.png" alt="your image" width="502" height="319"/> 

그리고 내가 이미지를 변경하려면이 코드를 사용하여 JS에서 :

function readURL(input) { 
if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     $('#img-edt') 
      .attr('src', e.target.result) 
      .width(502) 
      .height(319); 
    }; 
    reader.readAsDataURL(input.files[0]); 
} 
showDimension(); 
} 

을 이미지로드가 끝나면 원본 이미지의 크기를 알아야하므로이 함수를 사용합니다.

function showDimension() { 
var mm = document.getElementById("img-edt"); 
var ww = mm.naturalWidth; 
var hh = mm.naturalHeight; 
var x = document.getElementById("teeest"); 
x.innerHTML = "w is: " + String(ww) + "h is: " + String(hh); 
} 

하지만 문제는 항상 이전 이미지의 크기를 바꿉니다. 이 문제를 도와주세요. 이미지를 변경하는 비동기 작업이기 때문에

Answer 1

, 당신은뿐만 아니라 onload 콜백에 showDimension() 기능을 이동해야합니다 :

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      $('#img-edt') 
       .attr('src', e.target.result) 
       .width(502) 
       .height(319); 
      showDimension(); 
     }; 
     reader.readAsDataURL(input.files[0]); 
    } 
}