JS - Upload em multiplas imagens com FileReader / Como remover uma imagem?

jQuery

JavaScript

13/05/2022

Boa tarde!

Tenho um script para upar múltiplas imagens e exibir em um preview.. Tentei implementar uma funcionalidade para verificar o tamanho e bloquear o cadastro, removendo a imagem caso entrasse na condição. O problema é que quero remover apenas uma imagem, porém da forma como está limpa todo o meu input e não insere nenhuma. Fiz diversas pesquisas e ao que parece, não tem como remover apenas uma imagem, não sei se realmente é isso.. Caso alguém possa ajudar, ficarei agradecido!

Ex: Adiciono duas imagens, uma certa e uma "errada". Na errada me apresenta o aviso e remove. O problema é que remove tudo, meu fileInput.value fica como empty. Já tentei alguma forma percorrendo e tentando remover somente de determinada posição, mas não consegui.

let photo = document.getElementById('imgPhoto'); //pega a imagem da camera
let fileInput = document.getElementById('file-input'); // pega o input file

//adiciona um evento de clique na imagem da camera
photo.addEventListener('click', () => {
    fileInput.click();
});

fileInput.addEventListener('change', function(e) {
    var files = e.target.files; //aqui recebo um filelist com o(s) arquivo(s).
    // console.log(files);

    var filesLength = files.length; //recebo a quantidade de arquivos selecionados
    // console.log(files.length);
    
    //percorrendo os arquivos.
    for (var i = 0; i < filesLength; i++) {
        
        var f = files[i] //aqui recebo o arquivo, com name, size, type, etc.. cada um em uma posição.

        const fsize = fileInput.files.item(i).size; //aqui recebo o tamanho de cada arquivo.
        const tamanhoAceitaval = Math.round((fsize / 1024));
    
        console.log('antes de limpar: ', fileInput.value);
        if (tamanhoAceitaval >= 4096) {
            alert("File too Big, please select a file less than 4mb");
                
            fileInput.value = "";

            console.log('depois de limpar: ', fileInput.value);
            console.log(files.length);
    
        } else if (tamanhoAceitaval < 2048) {
            alert("File too small, please select a file greater than 2mb");
    
            fileInput.value = "";

            console.log('depoois de limpar: ', fileInput.value);
            console.log(files.length);
        }
        else{
            var fileReader = new FileReader();
        
            fileReader.onload = (function(e) {
                var file = e.target;
                
                $("<span class="pip">" + "<img class="imageThumb" src="" + file.result + "" title="" + 
                    file.name + ""/>" + "<br/><span class="remove">Remover imagem</span>" + "</span>").insertAfter("#file-input");

                $(".remove").click(function(){
                    $(this).parent(".pip").remove();
                    fileInput.value = "";
                });
            });
            
            fileReader.readAsDataURL(f);
        }
    }
});
Nomad

Nomad

Curtidas 0

Respostas

Nomad

Nomad

13/05/2022

Up!
GOSTEI 0
Gxf

Gxf

13/05/2022










?
GOSTEI 0
POSTAR