Como faço para fazer upload de imagens e exibi-las dentro de uma div, e quando o usuário fizer um novo upload esses imagens serem substituídas. Ex: o usuário faz o upload de imagens img1.jpg, img2.jpg caso ele faça o upload de novas imagens img3.jpg, img4.jpg as primeira imagem devem desaparecer. No código abaixo as imagens são adicionadas mas as primeiras imagens ainda continuam.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>$(function() {
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>
<style>
.gallery img{
width: 90px;
height: 55px;
}
</style>
</head>
<body>
<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>
</body>
</html>