add image as div with javascript

Question

I am trying to add an image as an element into my webpage. I am unable to do so. There are instructions on how to preview an image, but I was unable to find a solution.

What I want it to do is to add a div with an image into the webpage and keep loading it with different images. So after I add image 1, I would load image 2 under image 1 in the same webpage.

html body code:

<input type='file' id='getval' /><br/><br/>
<span onclick="readURL()" class="addBtn">Add</span>
<div id="myUL"></div>

javascript code:

<script type="text/javascript">
    // grabs image
    var file = document.createElement('image');
    file.src = document.getElementById('getval').files[0];
    // creates div & assigns id
    var div = document.createElement('div');
    div.id = 'item';

    // adds file to div
    file.type = 'image';
    div.appendChild(file);

    //adds item
    document.getElementById("myUL").appendChild(div);
}
</script>

edit1* I think adding the output of the code I want to display would be better inside the html document.

javascript generates html code inside document:

 <div style="background-image":url("image");"><div>

Niklesh Raut · Accepted Answer · 2017-05-08 13:00:37Z

1

You can use this script

count = 0;
function viewImage(){
var imagefile = document.querySelector('#image');
                if (imagefile.files && imagefile.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
var content = '<img id="temp_image_'+count+'" style="border: 1px solid; width: 107px;height:107px;" >';
document.querySelector('#all_images').innerHTML += content;
document.querySelector('#temp_image_'+count).setAttribute('src', e.target.result);
                    };  reader.readAsDataURL(imagefile.files[0]);
                  this.imagefile = imagefile.files[0];
                  count++;
                }else{
                    console.log("Image not selected");
                }
   }

<div id="all_images">
</div>
<input id="image" name="image" type="file" onChange="viewImage()">

edited May 8, 2017 at 13:00

answered May 8, 2017 at 12:31

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

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

2 Comments

user3435505 Over a year ago

Thanks, but it was not what I asked for. I asked for images that would be loaded into the webpage as a new individual element.

user3435505 Over a year ago

Yes please~ There are scripts for what you posted elsewhere, I got a base of my code from other posts and tried to modify the code to fit what I want. However, I was unable to do so :(

Oussama Ben Ghorbel · Accepted Answer · 2017-05-08 12:29:56Z

0

Here you go, although pay attention to the comment at line 3.

<script type="text/javascript">
var file = document.createElement("img");
file.setAttribute("src", document.getElementById('getval').files[0]); //You can use HTML5 File API here
file.setAttribute("height", "250");
file.setAttribute("width", "250");
var divTocreate = document.createElement('div');
divTocreate.id = 'item';
divTocreate.appendChild(file);
document.getElementById("myUL").appendChild(divTocreate);
</script>

edited May 8, 2017 at 12:29

answered May 8, 2017 at 12:24

Oussama Ben Ghorbel

2,1494 gold badges20 silver badges38 bronze badges

1 Comment

user3435505 Over a year ago

hi, I tried your code. However, when I added it to the function, it was close to doing the job, adding a new image down the list. But, it failed to read the image file and inspecting the image, the tag came out as <img src="[object File]">. So the image was not read.

Collectives™ on Stack Overflow

add image as div with javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related