javascript - 使用输入文件更改 img 标签的 src

Question

我的 HTML 代码中有一个像这样的 input 和 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

由于更改图像是异步操作，因此您还必须将 showDimension() 函数移至 onload 回调中:

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