Jump to content

POWERED BY:

Sign in to follow this  
luiz monteiro

Remover arquivo do input file

Recommended Posts

Boa noite!

Estou desenvolvendo um sistema de cadastro de produtos, no qual é anexado várias imagens, porem as vezes o cliente seleciona uma ou mais imagens "erradas".

Preciso entender como remover do input file a imagem quando é clicado no ícone de lixeira correspondente a imagem em javascript puro, sem framesworks, etc.

 

Agradeço desde já!

Share this post


Link to post
Share on other sites

Para fazer isso você vai ter que redefinir todos os arquivos que estejam no input.

O segredo é obter o nome ou qualquer informação da imagem que possa ser comparado com o objeto FileList do input.files.

Então você compara se essa informação não condiz com as demais, adicionando o atual aquivo "que não seja o que vai ser removido" e o adiciona a um objeto que seja capaz de interpretara-lo.

Para esse afim você pode está usando a API nativa DataTransfer.

Por fim você redefine o [input].files com todos arquivos.

Exemplo:

<input type="file" multiple="" />

<button onclick="exemplo()">Remover</button>
<button onclick="ver()">Ver Arquivos</button>

<script>
    var input = document.querySelector('input');

    function exemplo() {
        var dataT = new DataTransfer();

        for (var i = 0; i < input.files.length; i++) {
            // No caso se o nome do arquivo que está não input for imagem.jpg
            if (input.files[i].name !== 'imagem.jpg') {
                dataT.items.add(input.files[i]);
            }
        }
        input.files = dataT.files;
    }

    function ver() {
        console.log(input.files);
    }
</script>

 

Share this post


Link to post
Share on other sites

Boa noite.

Legal.

Obrigado.

 

Eu preciso de algumas coisas especificas sobre esse assunto. Fiquei algum tempo parado cuidando da minha falecida mãe....

Você tem whatsapp para passar para que possamos combinar uma aula ou mais dentro da minha necessidade?

Share this post


Link to post
Share on other sites

Marcar uma aula ou indicar outra não sou capaz... Uma vez que "todas aulas/cursos que fiz" nenhum era melhor que eu que aprendi na "raça".

Mas sempre quando tenho alguma dúvida consulto aqui: https://developer.mozilla.org/

 

Obs.: Sou um dos colaboradores

 

Share this post


Link to post
Share on other sites

Bom dia.

Mesmo assim muito obrigado.

Eu li bastante no https://developer.mozilla.org/ mas mesmo assim não consegui resolver outros problemas semelhantes ao que você passou a solução.

Vou abrir outros posts para aperfeiçoar minhas necessidades com javascript.

 

Obrigado.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By lucas70770
      Olá, estou trabalhando com uma pagina de update e quero que ocorra um evento quando meu input file for cancelado, especificadamente quando ele ainda esta vazio e é aberto para seleção do arquivo e assim cancelado. Quero que dispare um evento de preferencia em Jquery.
       
    • By Diego Pancera Dos Santos
      Ola amigos,
      Eu tenho um input file multiple para carregar fotos, preciso que o valor desse input file seja passado para um outro input file atravez do javascript.
      A unica coisa que eu nao estou conseguindo fazer, e transferir esse valor de um input para o outro.
      Alguém sabe como posso fazer isso ?
      Agradeço desde ja pela ajuda!
    • By adavis
      Olá, boa tarde.
      Estou com um problema e não estou atinando para resolver. Gostaria da ajuda de vcs se possível.
      Tenho um formulário com um campo input file, ao qual foi estilizado para mudar sua aparência com jquery e css. Até tudo bem, funcionando normalmente. Neste formulário fiz as validações com o jquery validade.
      Os demais campos do formulário(input, select, textarea) a validação funciona direitinho (dá a mensagem de erro e os campos ficam com a borda vermelha) porém no input file a validação funciona até, mas o css não pega nele, não muda a cor da borda. Já verifiquei o css está tudo normal. Acredito que seja alguma alteração que tenha que fazer no script mas não estou conseguindo.
      Alguém saberia me informar??
      Obrigada desde já.
      segue a baixo o código do script que "customiza" o input file.
      <script type="text/javascript"> ;(function( $ ) { // Browser supports HTML5 multiple file? var multipleSupport = typeof $('<input/>')[0].multiple !== 'undefined', isIE = /msie/i.test( navigator.userAgent ); $.fn.customFile = function() { return this.each(function() { var $file = $(this).addClass('customfile'), // the original file input $wrap = $('<div class="customfile-wrap">'), $input = $('<input type="text" class="customfile-filename" />'), // Button that will be used in non-IE browsers $button = $('<button type="button" class="customfile-upload">Selecionar</button>'), // Hack for IE $label = $('<label class="customfile-upload" for="'+ $file[0].id +'">Selecionar</label>'); // Hide by shifting to the left so we // can still trigger events $file.css({ position: 'absolute', left: '-9999px' }); $wrap.insertAfter( $file ) .append( $file, $input, ( isIE ? $label : $button ) ); // Prevent focus $file.attr('tabIndex', -1); $button.attr('tabIndex', -1); $button.click(function () { $file.focus().click(); // Open dialog }); $file.change(function() { var files = [], fileArr, filename; // If multiple is supported then extract // all filenames from the file array if ( multipleSupport ) { fileArr = $file[0].files; for ( var i = 0, len = fileArr.length; i < len; i++ ) { files.push( fileArr[i].name ); } filename = files.join(', '); // If not supported then just take the value // and remove the path to just show the filename } else { filename = $file.val().split('\\').pop(); } $input.val( filename ) // Set the value .attr('title', filename) // Show filename in title tootlip .focus(); // Regain focus }); $input.on({ blur: function() { $file.trigger('blur'); }, keydown: function( e ) { if ( e.which === 13 ) { // Enter if ( !isIE ) { $file.trigger('click'); } } else if ( e.which === 8 || e.which === 46 ) { // Backspace & Del // On some browsers the value is read-only // with this trick we remove the old input and add // a clean clone with all the original events attached $file.replaceWith( $file = $file.clone( true ) ); $file.trigger('change'); $input.val(''); } else if ( e.which === 9 ){ // TAB return; } else { // All other keys return false; } } }); }); }; // Old browser fallback if ( !multipleSupport ) { $( document ).on('change', 'input.customfile', function() { var $this = $(this), // Create a unique ID so we // can attach the label to the input uniqId = 'customfile_'+ (new Date()).getTime(), $wrap = $this.parent(), // Filter empty input $inputs = $wrap.siblings().find('.customfile-filename') .filter(function(){ return !this.value }), $file = $('<input type="file" id="'+ uniqId +'" name="'+ $this.attr('name') +'"/>'); // 1ms timeout so it runs after all other events // that modify the value have triggered setTimeout(function() { // Add a new input if ( $this.val() ) { // Check for empty fields to prevent // creating new inputs when changing files if ( !$inputs.length ) { $wrap.after( $file ); $file.customFile(); } // Remove and reorganize inputs } else { $inputs.parent().remove(); // Move the input so it's always last on the list $wrap.appendTo( $wrap.parent() ); $wrap.find('input').focus(); } }, 1); }); } }( jQuery )); $('input[type=file]').customFile(); </script>
    • By Clésio Teixeira
      Boa noite,
       
      Estou desenvolvendo um cadastro de pessoas para um sistema. Trata-se de uma tela de cadastro comum em HTML, PHP e Javascript. Em relação aos campos, utilizo input text, textarea e input file.
       
      A tela está funcionando corretamente, o usuário entra com os dados e o sistema faz a inserção ou a alteração no banco de dados e também faz o upload de imagens para o servidor.
       
      Para a obtenção do arquivo de imagem eu utilizo o input type: file e através das informações nesse elemento html eu realizo o upload do arquivo no momento da inserção das informações no banco de dados.
       
      O meu problema está no momento de alterar os dados de cadastro: O sistema precisa verificar se a imagem foi ou não alterada e se foi alterada eu devo substituir a informação no banco de dados e apagar a imagem antiga do servidor e fazer o upload da nova imagem.
       
      A solução que eu pensei, ou melhor dizendo, parte dela: No momento que eu busco as informações daquele determinado cadastro eu devo poder manipular o elemento input type:file, passando para ele o valor que trago do banco de dados e depois comparar com alguma variavel no momento de alterar o registro.
       
      O que eu preciso é: Manipular input type:file através do javascript(jquery), como eu passo um valor que trago do banco de dados para o componente? Se alguém tiver alguma ideia e poder contribuir eu agradeço.
       
      Muito obrigado.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.