CODEWITHSUNDEEP
javascripthtml
Kyv
Kyv

Reputation: 677

How to display an image while uploading it using javascript

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.

Upvotes: 0

Views: 94

Answers (2)

Majed Badawi
Majed Badawi

Reputation: 28404

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>

Upvotes: 1

anees
anees

Reputation: 1855

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>

Upvotes: 1

Related Questions