When i Input 2 Images to Preview without Upload, it shows them just fine. The Problem comes when i pick other Files. They are added into the Preview instead of getting deleted. Basically now only the new 2 Images would be Uploaded but in the Preview he sees 4 Images. How can i delete the old Images when he Input new ones.
I figured a If Statement would help the Case but i am not sure how to write it.
This is my JS Preview:
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if ('.previewdeleter' ===('image') ){
var deletepreview = ('previewdeleter')
}
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$('<div class="previewdeleter position-relative" data-item-id-div="input.files[i].length" style="height:200px;width: 200px; display: inline-block; position: relative !important;">' +
'<img alt="" src=' + event.target.result + ' style="height:200px;width: 100%; display: inline-block;">')
.appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i],);
}
}
};
$('#images').on('change', function() {
imagesPreview(this, '#previewHolder',);
});
});
This is my HTML:
<input value="" type="file" id="images" name="images[]" accept="image/*" multiple />
<div id="previewHolder" data-item-id-div="input.files[i].length" multiple="" class="previewdeleter position-relative">
</div>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire