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

Réponse rapide : remplacez-le.

Dans le code ci-dessous, j'utilise le replaceWith Méthode jQuery pour remplacer le contrôle par un clone de lui-même. Au cas où vous auriez des gestionnaires liés aux événements de ce contrôle, nous voudrons également les préserver. Pour ce faire, nous passons dans true comme premier paramètre de la méthode clone mé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, pose des problèmes, vous pouvez 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 permet d'éviter que les gestionnaires ne soient clonés avec l'élément lorsque le contrôle est actualisé.

Answer 2

Cette solution est plus élégante que le clonage de l'élément d'entrée. Vous enveloppez un <form> autour de l'élément, appelez reset sur le formulaire, puis retirez le formulaire en utilisant unwrap(). Contrairement aux solutions clone() ci-dessus, vous vous retrouvez avec le même élément à la fin (y compris les propriétés personnalisées qui ont été définies sur lui).

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

http://jsfiddle.net/rPaZQ/

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

Comme Timo le fait remarquer ci-dessous, si vous avez les boutons pour déclencher la réinitialisation du champ à l'intérieur de l'élément <form> vous devez appeler preventDefault sur l'événement afin d'empêcher l'utilisation de la fonction <button> de déclencher une soumission.

Answer 3

Pour des raisons évidentes de sécurité, 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 voulez seulement réinitialiser l'entrée du 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/

Answer 4

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

Answer 5

Dans IE8, le champ de téléchargement de fichiers est en lecture seule pour des raisons de sécurité. Voir le Article de blog de l'équipe de l'IE :

Historiquement, le contrôle de téléchargement de fichiers HTML () a été la source 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 s'appuient sur le "vol" de frappes clavier pour inciter subrepticement l'utilisateur à saisir un chemin d'accès à un fichier local dans le contrôle, la zone d'édition du chemin d'accès au 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 File Browse.

En outre, l'URLAction "Inclure le chemin d'accès au répertoire local lors du téléchargement de fichiers" a été définie comme "désactivée" pour la zone Internet. Ce changement empêche la fuite d'informations potentiellement sensibles sur le système de fichiers local vers l'Internet. Par exemple, plutôt que de soumettre le chemin d'accès complet C:\users\ericlaw\documents\secret\image.png Internet Explorer 8 ne soumettra désormais que le nom de fichier image.png.