[英]change src of img tag with input file
我的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);
}
但是問題在於,它總是返回前一張圖像的大小。 請幫助我解決這個問題。
由於更改圖像是異步操作,因此您還必須將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]);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.