重叠图像预览

Question

我想在上传之前创建一个预览图像。当我选择新的图像时，代码在添加之前不会删除旧的图像。当我选择新图像时，我想删除旧图像。

$(document).ready(function() {
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="files[]" multiple id="gallery-photo-add" class="chooseFile">
<div class="gallery">
</div>

Answer 1

要实现所需功能，只需在附加图像的容器上调用empty()即可。

还要注意，用于循环、处理和附加图像的逻辑可以变得更简洁。试试这个：

jQuery($ => {
let imagesPreview = function(input, placeToInsertImagePreview) {
$(placeToInsertImagePreview).empty();

Array.from(input.files).forEach(file => {
let reader = new FileReader();
reader.onload = e => $('<img>').prop('src', e.target.result).appendTo(placeToInsertImagePreview);
reader.readAsDataURL(file);
});
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="files[]" multiple id="gallery-photo-add" class="chooseFile">
<div class="gallery"></div>

Answer 2

您可以在调用imagesPreview(..)之前尝试添加$('.gallery').empty();。

$('#gallery-photo-add').on('change', function() {
$('.gallery').empty();
imagesPreview(this, 'div.gallery');
});

Answer 3

不要像base64那样使用异步文件读取器读取图像，只会浪费处理&记忆力使用ObjectURL，它可以创建指向blob/文件的引用点

jQuery($ => {
let imagesPreview = function(input, placeToInsertImagePreview) {
$(placeToInsertImagePreview).empty()

Array.from(input.files).forEach(file => {
$('<img>', {
src: URL.createObjectURL(file)
}).appendTo(placeToInsertImagePreview)
})
}
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery')
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="files[]" multiple id="gallery-photo-add" class="chooseFile">
<div class="gallery"></div>