此函数应显示要上传的图像。但在选择文件时,它不显示图像。
function show_img(id_img) {
if(this.files && this.files[0])
{
var reader = new FileReader();
reader.onloadend = function(data) {
var image = document.getElementById(id_img);
image.src = data.target.result;
}
reader.readAsDataURL(this.files[0]);
}
}
function create_img()
{
//create image
var file_input = document.createElement('img');
file_input.id = "123_qwe";
file_input.height = "200";
file_input.width = "300";
contain.appendChild(file_input);
//btn upload image
var btn_image = document.createElement("INPUT");
btn_image.setAttribute("type", "file");
btn_image.name = "ref_img";
var id_image = "ref_img";
btn_image.id = id_image;
contain.appendChild(btn_image);
//Display image
document.getElementById(id_image).addEventListener("onchange", function(){
show_img.call(id_image);
console.log(id_image);
});
}
<div id="contain">
<Button id="btn_top" onclick="create_img();">create image</Button>
</div>
如何让图像出现在图像标签中? 预先感谢您。
最佳答案
这是更新后的代码。
注意:您为变量提供了一些错误的名称。确保纠正它们以减少困惑。
function show_img(id_img, input) {
if(input.files && input.files[0])
{
var reader = new FileReader();
reader.onload = function(data) {
var image = document.getElementById(id_img);
image.src = data.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
function create_img()
{
//create image
var file_input = document.createElement('img');
file_input.id = "123_qwe";
file_input.height = "200";
file_input.width = "300";
contain.appendChild(file_input);
//btn upload image
var btn_image = document.createElement("INPUT");
btn_image.setAttribute("type", "file");
btn_image.name = "ref_img";
var id_image = "ref_img";
btn_image.id = id_image;
contain.appendChild(btn_image);
//Display image
document.getElementById(id_image).addEventListener("change", function(e){
show_img(file_input.id, e.target);
console.log(id_image);
});
}
<div id="contain">
<Button id="btn_top" onclick="create_img();">create image</Button>
</div>
关于javascript - 如何使用javascript在上传图像时显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60959480/