Я писал коды для выбора нескольких изображений и получал предварительные просмотры на одной и той же странице, начальные шаги были в порядке, но, поскольку я пытался поместить предварительные просмотры изображений в список, у меня возникли трудности с выполнением предварительного просмотра. любая помощь будет оценена.
Мои html-коды
<input type="file" id="ad_images" multiple accept="image/*" />
<ul id="gallery"></ul>
Мои коды JQuery:
window.onload = function() {
(function(){
function previewImage(file) {
var gallery = document.getElementById("gallery");
var imageType = /image.*/;
if (!file.type.match(imageType)) {
throw "File Type must be an image";
}
var e_li = document.createElement ("li"); //create li
var e_figure = document.createElement ("figure"); //create figure
e_figure.appendChild(e_img); //put img inside figure
e_li.appendChild(e_figure); //put figure inside li
gallery.appendChild(e_li); //put li inside gallery
// Using FileReader to display the image content
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(e_img);
reader.readAsDataURL(file);
}
var uploadfiles = document.querySelector('#ad_images');
uploadfiles.addEventListener('change', function () {
var files = this.files;
for(var i=0; i<files.length; i++){
previewImage(this.files[i]);
}
}, false);
})();
}
После того, как я выберу одно / несколько изображений, мой результат должен быть таким:
<ul id="gallery">
<li>
<figure>
<img src="IMAGE">
</figure>
</li>
<li>
<figure>
<img src="IMAGE">
</figure>
</li>
...
</ul>
Заранее спасибо.