如何同时预览多张图片？

Question

I wrote this code but I can only preview one image but I want to preview multiple images at a same time. here is my code

 var loadFile = function(event) { var image = document.getElementById('output'); image.src = URL.createObjectURL(event.target.files[0]); };

 <p> <input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none" /> </p> <button> <label for="file" style="cursor: pointer">Upload to Album two</label> </button> <p><img id="output" width="200" /></p>

Answer 1

One way is to dynamically create the image and append it to a wrapper object (in this case a paragraph) instead of using a precreated image tag.

 var target = document.getElementById('output'); var loadFile = function (event) { var image = document.createElement('img'); image.src = URL.createObjectURL(event.target.files[0]); target.appendChild(image) };

 <p> <input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none" /> </p> <button> <label for="file" style="cursor: pointer">Upload to Album two</label> </button> <p id="output"></p>