How to display an image while uploading it using javascript

Question

This function should display the image to upload. But on selecting a file it is not showing the image.

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>

How could I make the image appears in the image tag ? Thank you in advance.

what does image.src returns ?

Mr Khan
– Mr Khan

2020-03-31 20:44:53 +00:00
Commented Mar 31, 2020 at 20:44 — Mr Khan
– Mr Khan, Commented Mar 31, 2020 at 20:44

anees · Accepted Answer · 2020-03-31 21:00:20Z

1

here is the updated code.

Note: you have provided some wrong names to the variables. make sure to correct them to decrease confusion.

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>

answered Mar 31, 2020 at 21:00

anees

1,8853 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anees Over a year ago

I also removed the call statement and changed the function arguments to make it clear. hope you don't mind.

Majed Badawi · Accepted Answer · 2020-03-31 21:01:12Z

You forgot to declare an element and passed the wrong id to the second function. A working version of your code would be:

function show_img(id_img, input) {
     if(input.files && input.files[0]){
         var reader = new FileReader();
         reader.onloadend = function(e) {
              document.getElementById(id_img).src = e.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";
     var contain = document.getElementById("contain");
     contain.appendChild(file_input);
     //btn upload image
     var btn_image = document.createElement("INPUT");
     btn_image.setAttribute("type", "file");
     var id_image = "ref_img";
     btn_image.name = id_image;
     btn_image.id = id_image;
     contain.appendChild(btn_image);
     //Display image
     document.getElementById(id_image).onchange = function(){
          show_img("123_qwe", this);
     };
}

<div id="contain">
     <button id="btn_top" onclick="create_img()">create image</button>
</div>

Collectives™ on Stack Overflow

How to display an image while uploading it using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related