JS - Upload em multiplas imagens com FileReader / Como remover uma imagem?
13/05/2022
0
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.
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
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)