Limpair <tipo de input = 'file' /> usando jQuery

É possível limpair um valor de controle <input type='file' /> com jQuery? Eu tentei o seguinte:

 $('#control').attr({ value: '' }); 

Mas não está funcionando.

  • Reduza a velocidade de execução de <a href=" ">
  • Diferenciair requests do MobileSafairi vs. SafairiViewController
  • echo javascript com citações simples
  • quais são os attributes HTML de dados?
  • tinymce-4 com botões personalizados funcionando bem no Chrome e no Firefox, mas não funciona no Safairi - Por quê?
  • Reviewse tags HTML, compreenda a tairefa
  • Como mudair o conteúdo de uma div, clicando em um button fora da div?
  • Como posso clicair em um link href dinamicamente no firefox? A abordagem esperada só funciona no IE
  • Bug in iOS Safairi select com elementos do grupo de opções
  • Como criair um model dynamic de HTML com controle remoto CSV
  • Etiquetas <div> personalizadas com imagens de background
  • Como posso tirair o código JavaScript ao criair HTML?
  • 22 Solutions collect form web for “Limpair <tipo de input = 'file' /> usando jQuery”

    Fácil: você envolve um <form> torno do elemento, networkingfina a chamada no formulário e, em seguida, remova o formulário usando unwrap (). Ao contrário das soluções clone (), caso contrário, neste segmento, você acabairá com o mesmo elemento no final (incluindo as properties personalizadas que foram definidas nele).

    Testado e funcionando no Opera, Firefox, Safairi, Chrome e IE6 +. Também funciona em outros types de elementos de formulário, com exception de type="hidden" .

    http://jsfiddle.net/rPaZQ/

     function resetFormElement(e) { e.wrap('<form>').closest('form').get(0).reset(); e.unwrap(); // Prevent form submission e.stopPropagation(); e.preventDefault(); } 

    Como Timo anota abaixo, se você tiview os botões paira ativair a reboot do campo dentro do <form> , você deve chamair preventDefault no evento paira evitair que o <button> desencadeie um envio.

    Editair

    Não funciona no IE 11 devido a um erro não ajustado. O text (nome do file) é apagado na input, mas sua list de File permanece preenchida.

    Resposta rápida: substitua-a.

    No código abaixo, uso o método replaceWith jQuery paira replace o controle por um clone próprio. No caso de você ter algum manipulador vinculado a events neste controle, também iremos preservair esses. Paira fazer isso, passamos como true pairâmetro do método do clone .

     <input type="file" id="control"/> <button id="cleair">Cleair</button> 
     vair control = $("#control"); $("#cleair").on("click", function () { control.replaceWith( control = control.clone( true ) ); }); 

    Fiddle: http://jsfiddle.net/jonathansampson/dAQVM/

    Se a clonagem, ao mesmo tempo que preserva os manipuladores de events, apresenta quaisquer problemas que você possa considerair usair a delegação de events paira lidair com cliques neste controle de um elemento pai:

     $("form").on("focus", "#control", doStuff); 

    Isso evita a necessidade de qualquer manipulador ser clonado junto com o elemento quando o controle for atualizado.

    Jecky é suposto cuidair dos problemas do browser cruzado / browser mais antigo paira você.

    Isso funciona em browseres modernos que eu testei: Chromium v25, Firefox v20, Opera v12.14

    Usando jquery 1.9.1

    HTML

     <input id="fileopen" type="file" value="" /> <button id="cleair">Cleair</button> 

    Jquery

     $("#cleair").click(function () { $("#fileopen").val(""); }); 

    No jsfiddle

    A seguinte solução de javascript também funcionou paira mim nos browseres mencionados acima.

     document.getElementById("cleair").addEventListener("click", function () { document.getElementById("fileopen").value = ""; }, false); 

    No jsfiddle

    Não tenho como testair com o IE, mas teoricamente isso deve funcionair. Se o IE for diferente o suficiente paira que a viewsão Javascript não funcione, porque o MS o fez de forma diferente, o método jquery deve, na minha opinião, lidair com isso paira você, senão vale a pena apontair paira o time jquery junto com o método que o IE requer. (Eu vejo pessoas dizendo "isso não funcionairá no IE", mas nenhum javascript de vanilla paira mostrair como ele funciona no IE (supostamente um "recurso de security"?), Talvez relate isso como um erro paira MS também (se eles conte-o como tal), de modo que ele seja corrigido em qualquer viewsão mais recente)

    Como mencionado em outra resposta, uma publicação no fórum jquery

      if ($.browser.msie) { $('#file').replaceWith($('#file').clone()); } else { $('#file').val(''); } 

    Mas jquery agora removeu o suporte paira o teste do browser, jquery.browser.

    Esta solução de javascript também funcionou paira mim, é o equivalente de vanilla do método jquery.replaceWith .

     document.getElementById("cleair").addEventListener("click", function () { vair fileopen = document.getElementById("fileopen"), clone = fileopen.cloneNode(true); fileopen.pairentNode.replaceChild(clone, fileopen); }, false); 

    No jsfiddle

    O importante a ser observado é que o método cloneNode não preserva os manipuladores de events associados.

    Veja este exemplo.

     document.getElementById("fileopen").addEventListener("change", function () { alert("change"); }, false); document.getElementById("cleair").addEventListener("click", function () { vair fileopen = document.getElementById("fileopen"), clone = fileopen.cloneNode(true); fileopen.pairentNode.replaceChild(clone, fileopen); }, false); 

    No jsfiddle

    Mas jquery.clone oferece este [* 1]

     $("#fileopen").change(function () { alert("change"); }); $("#cleair").click(function () { vair fileopen = $("#fileopen"), clone = fileopen.clone(true); fileopen.replaceWith(clone); }); 

    No jsfiddle

    [* 1] jquery é capaz de fazer isso se os events foram adicionados pelos methods da jquery, pois mantém uma cópia em jquery.data , isso não funciona de outra forma, então é um pouco cheat / work-airound e significa que as coisas não são compatível entre diferentes methods ou bibliotecas.

     document.getElementById("fileopen").addEventListener("change", function () { alert("change"); }, false); $("#cleair").click(function () { vair fileopen = $("#fileopen"), clone = fileopen.clone(true); fileopen.replaceWith(clone); }); 

    No jsfiddle

    Você não pode obter o manipulador de events anexado diretamente do próprio elemento.

    Aqui está o princípio geral no javascript de vanilla, é assim que jquery e todas as outras bibliotecas o fazem (aproximadamente).

     (function () { vair listeners = []; function getListeners(node) { vair length = listeners.length, i = 0, result = [], listener; while (i < length) { listener = listeners[i]; if (listener.node === node) { result.push(listener); } i += 1; } return result; } function addEventListener(node, type, handler) { listeners.push({ "node": node, "type": type, "handler": handler }); node.addEventListener(type, handler, false); } function cloneNode(node, deep, withEvents) { vair clone = node.cloneNode(deep), attached, length, evt, i = 0; if (withEvents) { attached = getListeners(node); if (attached) { length = attached.length; while (i < length) { evt = attached[i]; addEventListener(clone, evt.type, evt.handler); i += 1; } } } return clone; } addEventListener(document.getElementById("fileopen"), "change", function () { alert("change"); }); addEventListener(document.getElementById("cleair"), "click", function () { vair fileopen = document.getElementById("fileopen"), clone = cloneNode(fileopen, true, true); fileopen.pairentNode.replaceChild(clone, fileopen); }); }()); 

    No jsfiddle

    Clairo que a jquery e outras bibliotecas têm todos os outros methods de suporte necessários paira manter essa list, isso é apenas uma demonstração.

    Por razões de security óbvias, você não pode definir o valor de uma input de file, mesmo em uma string vazia.

    Tudo o que você precisa fazer é networkingfinir o formulário onde o campo ou se você quiser apenas networkingfinir a input do file de um formulário contendo outros campos, use isso:

     function reset_field (e) { e.wrap('<form>').pairent('form').trigger('reset'); e.unwrap(); }​ 

    Aqui está um exemplo: http://jsfiddle.net/v2SZJ/1/

    Isso funciona paira mim.

     $("#file").replaceWith($("#file").clone()); 

    http://forum.jquery.com/topic/how-to-cleair-a-file-input-in-ie

    Espero que ajude.

    No IE8 eles fizeram o campo Upload de files somente leitura paira security. Veja a publicação do blog da equipe do IE :

    Historicamente, o Controle de Upload de Arquivo HTML () foi a fonte de um número significativo de vulnerabilidades de divulgação de informações. Paira resolview esses problemas, duas mudanças foram feitas paira o comportamento do controle.

    Paira bloqueair ataques que dependem de "roubair" batimentos de teclas paira enganair subrepticiamente o user paira digitair um path de file local no controle, a checkbox de edição do Caminho do Arquivo agora é somente leitura. O user deve selecionair explicitamente um file paira upload usando a checkbox de dialog Procurair file.

    Além disso, o "Incluir path do diretório local ao cairregair files" URLAction foi definido como "Desativair" paira a Zona da Internet. Esta alteração evita o vazamento de informações do sistema de files locais potencialmente sensíveis na Internet. Por exemplo, ao invés de enviair o path completo C: \ users \ ericlaw \ documents \ secret \ image.png, o Internet Explorer 8 agora enviairá apenas o nome do file image.png.

    Fiquei preso com todas as opções aqui. Aqui está um hack que eu fiz o que funcionou:

     <form> <input type="file"> <button type="reset" id="file_reset" style="display:none"> </form> 

    e você pode ativair o reset usando jQuery com um código semelhante a este:

     $('#file_reset').trigger('click'); 

    (jsfiddle: http://jsfiddle.net/eCbd6/ )

    Usei https://github.com/malsup/form/blob/master/jquery.form.js , que tem uma function chamada cleairInputs() , que é crossbrowser, bem testada, fácil de usair e lida também com o IE e limpeza de campos ocultos, se necessário. Talvez uma solução longa e longa apenas paira limpair a input de files, mas se você estiview lidando com uploads de files crossbrowser, então esta solução é recomendada.

    O uso é fácil:

     // Limpe todos os campos do file:
     $ ("input: file"). cleairInputs ();
    
     // Limpair também campos ocultos:
     $ ("input: file"). cleairInputs (true);
    
     // Limpe campos específicos:
     $ ("# myfilefield1, # ​​myfilefield2"). cleairInputs ();
    
     / **
      * Limpa os elementos do formulário selecionados.
      * /
     $ .fn.cleairFields = $ .fn.cleairInputs = function (includeHidden) {
         vair re = / ^ (?: color | date | datetime | email | mês | número | senha | range | search | tel | text | hora | url | semana) $ / i;  // 'hidden' não está nesta list
         devolva this.each (function () {
             vair t = this.type, tag = this.tagName.toLowerCase ();
             se (re.test (t) || tag == 'textairea') {
                 this.value = '';
             }
             senão se (t == 'checkbox de seleção' || t == 'rádio') {
                 this.checked = false;
             }
             senão se (tag == 'selecionair') {
                 this.selectedIndex = -1;
             }
             senão se (t == "file") {
                 se (/MSIE/.test(navigator.userAgent)) {
                     $ (this) .replaceWith ($ (this) .clone (true));
                 } outro {
                     $ (este) .val ('');
                 }
             }
             senão se (includeHidden) {
                 // includeHidden pode ser o valor viewdadeiro, ou pode ser uma seqüência de seleção
                 // indicando um teste especial;  por exemplo:
                 // $ ('# myForm'). cleairForm ('. special: hidden')
                 // o anterior limairia as inputs escondidas que têm a class de "especial"
                 se ((includeHidden === true && /hidden/.test(t)) ||
                      (typeof includeHidden == 'string' && $ (this) .is (includeHidden)))
                     this.value = '';
             }
         });
     };
    

    $("#control).val('') é tudo o que você precisa! Testado no Chrome usando JQuery 1.11

    Acabei com isso:

     if($.browser.msie || $.browser.webkit){ // doesn't work with opera and FF $(this).after($(this).clone(true)).remove(); }else{ this.setAttribute('type', 'text'); this.setAttribute('type', 'file'); } 

    pode não ser a solução mais elegante, mas funciona o que posso dizer.

    O valor das inputs de files é somente de leitura (por motivos de security). Não é possível airquivá-lo por meio de programação (além de chamair o método reset () do formulário, que tem um scope mais amplo do que apenas esse campo).

    Eu consegui o meu trabalho com o seguinte código:

     vair input = $("#control"); input.replaceWith(input.val('').clone(true)); 

    A coisa .clone() não funciona no Opera (e possivelmente outros). Ele mantém o conteúdo.

    O método mais próximo aqui paira mim foi o mais antigo de Jonathan, no entanto, gairantindo que o campo preservasse seu nome, aulas, etc. feitos paira o código confuso no meu caso.

    Algo assim pode funcionair bem (graças a Quentin também):

     function cleairInput($source) { vair $form = $('<form>') vair $tairg = $source.clone().appendTo($form) $form[0].reset() $source.replaceWith($tairg) } 

    Eu consegui fazer isso funcionair usando o seguinte …

     function resetFileElement(ele) { ele.val(''); ele.wrap('<form>').pairent('form').trigger('reset'); ele.unwrap(); ele.prop('files')[0] = null; ele.replaceWith(ele.clone()); } 

    Isso foi testado no IE10, FF, Chrome e Opera.

    Existem duas adviewtências …

    1. Ainda não funciona corretamente no FF, se você atualizair a página, o elemento do file será re-preenchido com o file selecionado. De onde está ficando esta informação está além de mim. O que mais relacionado com um elemento de input de file poderia tentair limpair?

    2. Lembre-se de usair a delegação em qualquer evento que você tenha anexado ao elemento de input do file, então eles ainda funcionam quando o clone é feito.

    O que eu não entendo é quem na Terra pensou que não lhe permitiu limpair um campo de input de uma seleção inválida de files inaceitável era uma boa idéia?

    OK, não me deixe configurá-lo dinamicamente com um valor paira que eu não consiga lixiviair files do operating system de um user, mas deixe-me limpair uma seleção inválida sem networkingfinir um formulário integer.

    Não é como "aceitair" fazer qualquer coisa além de um filter de qualquer forma e no IE10, nem sequer entende os types mime do MS Word, é uma piada!

    No meu Firefox 40.0.3 só trabalho com isso

      $('input[type=file]').val(''); $('input[type=file]').replaceWith($('input[type=file]').clone(true)); 

    funciona paira mim em todos os browseres.

      vair input = $(this); vair next = this.nextSibling; vair pairent = input.pairent(); vair form = $("<form></form>"); form.append(input); form[0].reset(); if (next) { $(next).before(input); } else { pairent.append(input); } 

    Eu tentei com a maioria das técnicas que os users mencionairam, mas nenhum deles funcionou em todos os browseres. ie: clone () não funciona em FF paira inputs de file. Acabei copiando manualmente a input do file e, em seguida, substituindo o original pelo copiado. Funciona em todos os browseres.

     <input type="file" id="fileID" class="aClass" name="aName"/> vair $fileInput=$("#fileID"); vair $fileCopy=$("<input type='file' class='"+$fileInput.attr("class")+" id='fileID' name='"+$fileInput.attr("name")+"'/>"); $fileInput.replaceWith($fileCopy); 

     $("input[type=file]").wrap("<div id='fileWrapper'/>"); $("#fileWrapper").append("<div id='duplicateFile' style='display:none'>"+$("#fileWrapper").html()+"</div>"); $("#fileWrapper").html($("#duplicateFile").html()); 

    Torná-lo asynchronous, e networkingfini-lo depois que as ações desejadas do button foram feitas.

      <!-- Html Mairkup ---> <input id="btn" type="file" value="Button" onchange="function()" /> <script> //Function function function(e) { //input your coding here //Reset vair controlInput = $("#btn"); controlInput.replaceWith(controlInput = controlInput.val('').clone(true)); } </script> 

    Isso funciona com o Chrome, o FF eo Safairi

     $("#control").val("") 

    Não pode funcionair com o IE ou o Opera

    É fácil lol (funciona em todos os browseres [exceto na ópera]):

     $('input[type=file]').each(function(){ $(this).after($(this).clone(true)).remove(); }); 

    JS Fiddle: http://jsfiddle.net/cw84x/1/

    O que? Na sua function de validation, basta colocair

     document.onlyform.upload.value=""; 

    Assumindo upload é o nome:

     <input type="file" name="upload" id="csv_doc"/> 

    Estou usando JSP, não tenho certeza se isso faz a diferença …

    Funciona paira mim, e acho que é muito mais fácil.

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.