Effacement de <input type = 'file' /> à l'aide de jQuery

Est-il possible d'effacer une <input type='file' />valeur de contrôle avec jQuery? J'ai essayé ce qui suit:

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

Mais ça ne marche pas.

Facile: vous entourez <form>l'élément, appelez reset sur le formulaire, puis supprimez le formulaire en utilisant .unwrap(). Contrairement aux .clone()solutions autrement dans ce fil, vous vous retrouvez avec le même élément à la fin (y compris les propriétés personnalisées qui y ont été définies).

Testé et fonctionne sous Opera, Firefox, Safari, Chrome et IE6 +. Fonctionne également sur d'autres types d'éléments de formulaire, à l'exception de type="hidden".

window.reset = function(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input id="file" type="file">
  <br>
  <input id="text" type="text" value="Original">
</form>

<button onclick="reset($('#file'))">Reset file</button>
<button onclick="reset($('#text'))">Reset text</button>

JSFiddle

Comme le note Timo ci-dessous, si vous avez les boutons pour déclencher la réinitialisation du champ à l'intérieur du <form>, vous devez faire appel .preventDefault()à l'événement pour empêcher le <button>déclenchement d'une soumission.

ÉDITER

Ne fonctionne pas dans IE 11 en raison d'un bogue non corrigé. Le texte (nom de fichier) est effacé sur l'entrée, mais sa Fileliste reste remplie.

Réponse rapide: remplacez-le.

Dans le code ci-dessous, j'utilise la replaceWithméthode jQuery pour remplacer le contrôle par un clone de lui-même. Si vous avez des gestionnaires liés à des événements sur ce contrôle, nous voudrons également les conserver. Pour ce faire, nous passons truecomme premier paramètre de la cloneméthode.

<input type="file" id="control"/>
<button id="clear">Clear</button>

var control = $("#control");

$("#clear").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

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

Si le clonage, tout en préservant les gestionnaires d'événements, présente tout problème que vous pourriez envisager d'utiliser la délégation d'événements pour gérer les clics sur ce contrôle à partir d'un élément parent:

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

Cela évite d'avoir à cloner des gestionnaires avec l'élément lors de l'actualisation du contrôle.

Jquery est censé prendre en charge les problèmes de navigateur / navigateur plus ancien pour vous.

Cela fonctionne sur les navigateurs modernes que j'ai testés: Chromium v25, Firefox v20, Opera v12.14

Utilisation de jquery 1.9.1

HTML

<input id="fileopen" type="file" value="" />
<button id="clear">Clear</button>

Jquery

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

Sur jsfiddle

La solution javascript suivante a également fonctionné pour moi sur les navigateurs mentionnés ci-dessus.

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

Sur jsfiddle

Je n'ai aucun moyen de tester avec IE, mais cela devrait théoriquement fonctionner. Si IE est suffisamment différent pour que la version Javascript ne fonctionne pas parce que MS l'a fait d'une manière différente, la méthode jquery devrait à mon avis s'en occuper pour vous, sinon il serait utile de le signaler à l'équipe jquery avec le qu'IE requiert. (Je vois des gens dire "cela ne fonctionnera pas sur IE", mais pas de javascript vanille pour montrer comment cela fonctionne sur IE (soi-disant une "fonction de sécurité"?), Peut-être aussi le signaler comme un bug à MS (s'ils le faisaient compter comme tel), afin qu'il soit corrigé dans toute nouvelle version)

Comme mentionné dans une autre réponse, un post sur le forum jquery

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

Mais jquery a désormais supprimé la prise en charge des tests du navigateur, jquery.browser.

Cette solution javascript a également fonctionné pour moi, c'est l'équivalent vanille de la méthode jquery.replaceWith .

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

Sur jsfiddle

La chose importante à noter est que la méthode cloneNode ne conserve pas les gestionnaires d'événements associés.

Voir cet exemple.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

Sur jsfiddle

Mais jquery.clone offre cela ^{[* 1]}

$("#fileopen").change(function () {
    alert("change");
});

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

Sur jsfiddle

^{[* 1]} jquery est capable de le faire si les événements ont été ajoutés par les méthodes de jquery car il conserve une copie dans jquery.data , cela ne fonctionne pas autrement, donc c'est un peu une triche / solution de contournement et signifie que les choses ne sont pas compatible entre différentes méthodes ou bibliothèques.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

Sur jsfiddle

Vous ne pouvez pas obtenir le gestionnaire d'événements attaché directement à partir de l'élément lui-même.

Voici le principe général de vanilla javascript, c'est ainsi que jquery et toutes les autres bibliothèques le font (grosso modo).

(function () {
    var listeners = [];

    function getListeners(node) {
        var 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) {
        var 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("clear"), "click", function () {
        var fileopen = document.getElementById("fileopen"),
            clone = cloneNode(fileopen, true, true);

        fileopen.parentNode.replaceChild(clone, fileopen);
    });
}());

Sur jsfiddle

Bien sûr, jquery et d'autres bibliothèques ont toutes les autres méthodes de support nécessaires pour maintenir une telle liste, ceci n'est qu'une démonstration.

Pour des raisons de sécurité évidentes, vous ne pouvez pas définir la valeur d'une entrée de fichier, même sur une chaîne vide.

Tout ce que vous avez à faire est de réinitialiser le formulaire où le champ ou si vous souhaitez uniquement réinitialiser l'entrée de fichier d'un formulaire contenant d'autres champs, utilisez ceci:

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

Voici un exemple: http://jsfiddle.net/v2SZJ/1/

Cela fonctionne pour moi.

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

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

J'espère que cela aide.

Dans IE8, ils ont rendu le champ Téléchargement de fichiers en lecture seule pour des raisons de sécurité. Voir le blog de l'équipe IE :

Historiquement, le contrôle de téléchargement de fichiers HTML () a été à l'origine d'un nombre important de vulnérabilités de divulgation d'informations. Pour résoudre ces problèmes, deux modifications ont été apportées au comportement du contrôle.

Pour bloquer les attaques qui reposent sur le «vol» de touches pour tromper subrepticement l'utilisateur en tapant un chemin de fichier local dans le contrôle, la zone d'édition Chemin de fichier est désormais en lecture seule. L'utilisateur doit sélectionner explicitement un fichier à télécharger à l'aide de la boîte de dialogue Parcourir les fichiers.

De plus, l'URL «Inclure le chemin du répertoire local lors du téléchargement de fichiers» a été définie sur «Désactiver» pour la zone Internet. Cette modification empêche la fuite d'informations du système de fichiers local potentiellement sensibles sur Internet. Par exemple, au lieu de soumettre le chemin complet C: \ users \ ericlaw \ documents \ secret \ image.png, Internet Explorer 8 soumettra désormais uniquement le nom de fichier image.png.

$("#control").val('')est tout ce dont vous avez besoin! Testé sur Chrome à l'aide de JQuery 1.11

D'autres utilisateurs ont également testé dans Firefox.

Je suis resté coincé avec toutes les options ici. Voici un hack que j'ai fait et qui a fonctionné:

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

et vous pouvez déclencher la réinitialisation à l'aide de jQuery avec un code similaire à celui-ci:

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

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

Je me suis retrouvé avec ceci:

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'); 
}

n'est peut-être pas la solution la plus élégante, mais cela fonctionne pour autant que je sache.

J'ai utilisé https://github.com/malsup/form/blob/master/jquery.form.js , qui a une fonction appelée clearInputs(), qui est croisée, bien testée, facile à utiliser et gère également les problèmes IE et la suppression des champs cachés si besoin. Peut-être une solution un peu longue pour effacer uniquement l'entrée de fichier, mais si vous avez affaire à des téléchargements de fichiers croisés, cette solution est recommandée.

L'utilisation est simple:

// Efface tous les champs du fichier:
$ ("entrée: fichier"). clearInputs ();

// Efface également les champs masqués:
$ ("input: file"). clearInputs (true);

// Effacer des champs spécifiques:
$ ("# myfilefield1, # ​​myfilefield2"). clearInputs ();

/ **
 * Efface les éléments de formulaire sélectionnés.
 * /
$ .fn.clearFields = $ .fn.clearInputs = fonction (includeHidden) {
    var re = / ^ (?: couleur | date | datetime | email | mois | nombre | mot de passe | plage | recherche | tel | texte | heure | url | semaine) $ / i; // 'caché' n'est pas dans cette liste
    retourner this.each (function () {
        var t = this.type, tag = this.tagName.toLowerCase ();
        if (re.test (t) || tag == 'textarea') {
            this.value = '';
        }
        sinon if (t == 'case à cocher' || t == 'radio') {
            this.checked = false;
        }
        sinon si (tag == 'sélectionner') {
            this.selectedIndex = -1;
        }
        sinon si (t == "fichier") {
            if (/MSIE/.test(navigator.userAgent)) {
                $ (this) .replaceWith ($ (this) .clone (true));
            } autre {
                $ (ce) .val ('');
            }
        }
        sinon si (includeHidden) {
            // includeHidden peut être la valeur true, ou il peut s'agir d'une chaîne de sélection
            // indiquant un test spécial; par exemple:
            // $ ('# myForm'). clearForm ('. special: hidden')
            // ce qui précède nettoierait les entrées cachées qui ont la classe «spécial»
            if ((includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $ (this) .is (includeHidden))))
                this.value = '';
        }
    });
};

La valeur des entrées de fichier est en lecture seule (pour des raisons de sécurité). Vous ne pouvez pas le masquer par programme (autrement qu'en appelant la méthode reset () du formulaire, qui a une portée plus large que ce champ).

J'ai pu faire fonctionner le mien avec le code suivant:

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

Je cherchais un moyen simple et propre d'effacer les entrées de fichiers HTML, les réponses ci-dessus sont excellentes, mais aucune d'entre elles ne répond vraiment à ce que je recherche, jusqu'à ce que je tombe sur le Web avec une manière simple et élégante de le faire:

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

tout le mérite revient à Chris Coyier .

// Referneces
var control = $("#control"),
    clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
    control.replaceWith( control.val('').clone( true ) );
});

// Some bound handlers to preserve when cloning
control.on({
    change: function(){ console.log( "Changed" ) },
     focus: function(){ console.log(  "Focus"  ) }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>

La .clone()chose ne fonctionne pas dans Opera (et peut-être dans d'autres). Il garde le contenu.

La méthode la plus proche ici pour moi était celle de Jonathan plus tôt, mais en veillant à ce que le champ conserve son nom, ses classes, etc., ce qui rendait le code désordonné dans mon cas.

Quelque chose comme ça pourrait bien fonctionner (merci aussi à Quentin):

function clearInput($source) {
    var $form = $('<form>')
    var $targ = $source.clone().appendTo($form)
    $form[0].reset()
    $source.replaceWith($targ)
}

J'ai réussi à faire fonctionner cela en utilisant ce qui suit ...

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

Cela a été testé dans IE10, FF, Chrome et Opera.

Il y a deux mises en garde ...

1. Ne fonctionne toujours pas correctement dans FF, si vous actualisez la page, l'élément de fichier est re-rempli avec le fichier sélectionné. L'endroit où il obtient ces informations me dépasse. Quoi d'autre lié à un élément d'entrée de fichier pourrais-je essayer de supprimer?

2. N'oubliez pas d'utiliser la délégation sur tous les événements que vous avez attachés à l'élément d'entrée de fichier, afin qu'ils fonctionnent toujours lorsque le clone est effectué.

Ce que je ne comprends pas, c'est qui diable pensait que ne pas vous permettre d'effacer un champ d'entrée d'une sélection de fichiers inacceptable invalide était une bonne idée?

OK, ne me laissez pas le définir dynamiquement avec une valeur afin que je ne puisse pas lixivier des fichiers du système d'exploitation d'un utilisateur, mais permettez-moi d'effacer une sélection non valide sans réinitialiser un formulaire entier.

Ce n'est pas comme «accepter» fait quoi que ce soit d'autre qu'un filtre et dans IE10, il ne comprend même pas les types MIME de MS Word, c'est une blague!

Sur mon Firefox 40.0.3 ne fonctionne qu'avec ce

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

ses travaux pour moi dans chaque navigateur.

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

J'ai essayé avec la plupart des techniques mentionnées par les utilisateurs, mais aucune d'entre elles ne fonctionnait dans tous les navigateurs. ie: clone () ne fonctionne pas dans FF pour les entrées de fichiers. J'ai fini par copier manuellement l'entrée du fichier, puis remplacer l'original par celui copié. Cela fonctionne dans tous les navigateurs.

<input type="file" id="fileID" class="aClass" name="aName"/>

var $fileInput=$("#fileID");
var $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());

Cela fonctionne avec Chrome, FF et Safari

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

Peut ne pas fonctionner avec IE ou Opera

Rendez-le asynchrone et réinitialisez-le une fois les actions souhaitées du bouton effectuées.

    <!-- Html Markup --->
    <input id="btn" type="file" value="Button" onchange="function()" />

    <script>
    //Function
    function function(e) {

        //input your coding here           

        //Reset
        var controlInput = $("#btn");
        controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
    } 
    </script>

function clear() {
    var input = document.createElement("input");
    input.setAttribute('type', 'file');
    input.setAttribute('value', '');
    input.setAttribute('id', 'email_attach');

    $('#email_attach').replaceWith( input.cloneNode() );
}

ça ne marche pas pour moi:

$('#Attachment').replaceWith($(this).clone());
or 
$('#Attachment').replaceWith($('#Attachment').clone());

donc dans asp mvc j'utilise des fonctionnalités de rasoir pour remplacer l'entrée de fichier. créez d'abord une variable pour la chaîne d'entrée avec l'ID et le nom, puis utilisez-la pour afficher la page et remplacer le bouton de réinitialisation, cliquez sur:

@{
    var attachmentInput = Html.TextBoxFor(c => c.Attachment, new { type = "file" });
}

@attachmentInput

<button type="button" onclick="$('#@(Html.IdFor(p => p.Attachment))').replaceWith('@(attachmentInput)');">--</button>

Un moyen simple consiste à modifier le type d'entrée et à le modifier à nouveau.

Quelque chose comme ça:

var input = $('#attachments');
input.prop('type', 'text');
input.prop('type', 'file')

Vous pouvez le remplacer par son clone comme ça

var clone = $('#control').clone();

$('#control').replacewith(clone);

Mais ce clone avec sa valeur aussi, vous feriez mieux

var emtyValue = $('#control').val('');
var clone = emptyValue.clone();

$('#control').replacewith(clone);

C'est facile lol (fonctionne dans tous les navigateurs [sauf l'opéra]):

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

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

Quelle? Dans votre fonction de validation, mettez simplement

document.onlyform.upload.value="";

En supposant que le téléchargement est le nom:

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

J'utilise JSP, je ne sais pas si cela fait une différence ...

Fonctionne pour moi, et je pense que c'est beaucoup plus facile.