Display thumbnails before upload

Question

I am very unexperienced in Javascript/Jquery therefore I use the JavaScript Load Image plugin to handle the front end of my image upload process.

---

The Problem :

I would like to :

1. upload multiple images, not just one, and therefore also would like to
2. display all the images, which are to be uploaded as a thumbnail in the results div.

At the moment the thumbnails are appended to the end.

---

The Fiddle :

THE FIDDLE

---

The HTML (the relevant parts) :

system 'clear'

---

My attempt to loop through the to be uploaded images :

<!-- FILE INPUT -->
<p><input type="file" name="images[]" id="upload-post-images" multiple></p>

<!-- THUMBNAILS -->
<div id="result" class="result">
    <p>Here the thumbnails should be displayed.</p>
</div>

I would be very thankful for any kind of help!!

Answer 1

It's appending to the end, because that's exactly what you're telling it to do here:

toString

That's appending the image to the body - that is, adding it to the end.

What you want to be doing is appending it to your target div. You can find the div with the document.querySelector() function, and then append the image to that:

document.body.appendChild(img);

Where '#' means 'has an id of', and '.' means 'has a class of', for instance. If you were running this code with jQuery loaded, you could use the $() or jQuery() function instead, but your code is outside of the document.querySelector('#result').appendChild(img) block, so it will run before jQuery has loaded.

The $(function(){}) is just shorthand for $(function(){}), which runs the enclosed function when the document has loaded (and thus loaded jQuery).