Javascript 使用输入文件更改img标记的src
我的HTML代码中有一个输入和img标记,如下所示:Javascript 使用输入文件更改img标记的src,javascript,jquery,html,Javascript,Jquery,Html,我的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"/> 加载图像后,我需要知道原始图像的尺寸,因此我使用此函数: function showDimension() { var
<input type="file" name="img2" id="chooseimg" onchange="readURL(this);">
<img id="img-edt" src="l1.png" alt="your image" width="502" height="319"/>
加载图像后,我需要知道原始图像的尺寸,因此我使用此函数:
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);
}
但问题是它总是返回前一幅图像的大小。请帮助我解决此问题。由于更改图像是一个异步操作,因此您必须将
showdimmension()
函数移到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]);
}
}
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]);
}
}