Effacer <input type='file' /> en utilisant jQuery

Question

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

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

Mais ça ne marche pas.

Answer 1

J'ai réussi à le faire fonctionner 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());    
}

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

Il y a deux mises en garde...

1. Cela ne fonctionne toujours pas correctement dans FF, si vous rafraîchissez la page, l'élément de fichier est re-populé avec le fichier sélectionné. Je ne sais pas d'où vient cette information. Qu'est-ce que je pourrais essayer d'effacer d'autre lié à un élément d'entrée de fichier ?

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

Ce que je ne comprends pas, c'est qui a pensé que ne pas vous permettre d'effacer un champ de saisie à partir d'une sélection de fichier inacceptable invalide était une bonne idée ?

D'accord, ne me laissez pas le définir dynamiquement avec une valeur pour que je ne puisse pas extraire des fichiers du système d'exploitation d'un utilisateur, mais laissez-moi effacer une sélection invalide sans réinitialiser tout le formulaire.

Ce n'est pas comme si "accepter" faisait autre chose qu'un filtre de toute façon et dans IE10, il ne comprend même pas les types de mime de MS Word, c'est une blague !

Answer 2

C'est facile lol (fonctionne dans tous les navigateurs [sauf opera]) :

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

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

Answer 3

Cela fonctionne avec Chrome, FF et Safari.

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

Peut ne pas fonctionner avec IE ou Opera

Answer 4

Quoi ? Dans votre fonction de validation, mettez juste

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...

Ça marche pour moi, et je pense que c'est beaucoup plus facile.