1

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>

1 Resposta 1

2

Tenta fazer assim:

  var imagesPreview = function(input, placeToInsertImagePreview) {
    if (input.files) {
        var filesAmount = input.files.length;
        $(placeToInsertImagePreview).empty(); // remove as imagens antigas
        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]);
        }
    }

};

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .