Hello guys i really need help regarding to preview multiple images such as putting it onto different background-image url span or divs
function previewImages() {
if (this.files) $.each(this.files, readAndPreview);
function readAndPreview(i, file) {
if (!/\.(jpe?g|png|gif)$/i.test(file.name)){
return alert(file.name +" is not an image");
} // else...
var reader = new FileReader();
$(reader).on("load", function() {
$('span').css('background-image', 'url(' + this.result + ')');
});
reader.readAsDataURL(file);
}
}
$('#upload-incident-images').on("change", previewImages);
i want it to be like this
<div>
<span class="bigger-picture" style="background-image: url('image1')>
<span class="smaller-picture" style="background-image: url('image2')>
<span class="smaller-picture" style="background-image: url('image3')>
<div>
because spans have different classes which has different styles. i just want the images to fill on the span indexes