en utilisant jQuery'/> en utilisant jQuery'/> en utilisant jQuery'/> Effacer <input type = 'fichier' /> en utilisant jQuery | abulletproofidea.com

Question Effacer en utilisant jQuery


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.


506
2018-06-25 13:32


origine


Réponses:


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

Testé et utilisé 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();

  // Prevent form submission
  e.stopPropagation();
  e.preventDefault();
}

Comme le note Timo ci-dessous, si vous avez les boutons pour déclencher la réinitialisation du champ à l'intérieur de la <form>, vous devez appeler preventDefault sur l'événement pour empêcher le <button> de déclencher un soumettre.

modifier

Ne fonctionne pas dans IE 11 en raison d'un bug non fixé. Le texte (nom du fichier) est effacé sur l'entrée, mais son File liste reste peuplée.


505
2017-11-12 20:40



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. Si vous avez des gestionnaires liés aux événements de ce contrôle, nous souhaitons également les conserver. Pour ce faire, nous passons true comme le premier paramètre de la 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, présente des problèmes 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 le besoin de cloner les gestionnaires avec l'élément lors de l'actualisation du contrôle.


425
2018-05-16 19:40



Jquery est censé prendre en charge les problèmes de navigateur croisés / anciens pour vous.

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

Utiliser 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 en théorie, cela devrait fonctionner. Si IE est assez différente pour que la version Javascript ne fonctionne pas parce que MS l’a fait différemment, la méthode jquery devrait, à mon avis, la traiter pour vous, sinon il serait utile de la signaler à l’équipe jquery avec le méthode que IE exige. (Je vois des gens dire "ça ne marchera pas sur IE", mais pas de javascript pour montrer comment ça marche sur IE (soi-disant un "dispositif de sécurité"?), Peut-être le signaler comme un bogue à MS compte en tant que tel), de sorte qu'il se fixe dans toute version plus récente)

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 maintenant supprimé la prise en charge des tests de navigateur, jquery.browser.

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

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 le cloneNode méthode 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 ceci [*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 faire cela si les événements ont été ajoutés par les méthodes de jquery car il garde une copie dans jquery.data, cela ne fonctionne pas autrement, donc c'est un peu une triche / work-around et signifie que les choses ne sont pas compatibles 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 dans javascript vanilla, c'est comme ça que toutes les autres bibliothèques le font (à peu près).

(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, ce n'est qu'une démonstration.


94
2018-06-19 04:42



Pour des raisons évidentes de sécurité, vous ne pouvez pas définir la valeur d'une entrée de fichier, même pour 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 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/


47
2018-04-29 08:31



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.


42
2017-07-27 15:29



Dans IE8, ils ont rendu le champ de 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 fait de «voler» des frappes 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 maintenant en lecture seule. L'utilisateur doit sélectionner explicitement un fichier à télécharger à l'aide de la boîte de dialogue Parcourir le fichier.

En outre, le paramètre "Inclure le chemin du répertoire local lors du téléchargement des fichiers" URLAction a été défini sur "Désactiver" pour la zone Internet. Cette modification empêche la fuite d'informations de système de fichiers locales potentiellement sensibles sur Internet. Par exemple, plutôt que de soumettre le chemin complet C: \ users \ ericlaw \ documents \ secret \ image.png, Internet Explorer 8 ne soumettra plus que le nom de fichier image.png.


20
2018-01-22 18:16



Je me suis retrouvé avec toutes les options ici. Voici un hack que j'ai fait 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 en utilisant jQuery avec un code similaire à ceci:

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

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


12
2017-09-20 16:53



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


10
2018-04-03 04:21