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.

Answer 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>

Answer 2

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>