javascript - 如何在使用 javascript 上传图像时显示图像

Question

此功能应显示要上传的图像。但是在选择文件时，它不显示图像。

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>

如何使图像出现在图像标签中？先感谢您。

标签： javascripthtml

Answer 1

这是更新的代码。

注意：您为变量提供了一些错误的名称。确保纠正它们以减少混乱。

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>