Löschung von <input type='file' /> mit jQuery

Question

Ist es möglich, eine <input type='file' /> Kontrollwert mit jQuery? Ich habe das Folgende versucht:

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

Aber es funktioniert nicht.

Answer 1

Einfach: Sie wickeln eine <form> um das Element herum, rufen Sie Reset für das Formular auf und entfernen Sie das Formular mit .unwrap() . Anders als die .clone() Lösungen, die Sie in diesem Thread nicht finden, haben Sie am Ende dasselbe Element (einschließlich der benutzerdefinierten Eigenschaften, die dafür festgelegt wurden).

Getestet und funktioniert in Opera, Firefox, Safari, Chrome und IE6+. Funktioniert auch mit anderen Arten von Formularelementen, mit Ausnahme von 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

Wie Timo weiter unten anmerkt, können Sie die Schaltflächen zum Zurücksetzen des Feldes innerhalb der <form> müssen Sie anrufen .preventDefault() auf das Ereignis, um zu verhindern, dass die <button> eine Übermittlung auszulösen.

---

EDIT

Funktioniert nicht im IE 11 aufgrund eines nicht behobenen Fehlers. Der Text (Dateiname) wird bei der Eingabe gelöscht, aber seine File Liste bleibt gefüllt.

Answer 2

Schnelle Antwort: Ersetzen.

Im folgenden Code verwende ich die replaceWith jQuery-Methode, um das Steuerelement durch einen Klon von sich selbst zu ersetzen. Für den Fall, dass Sie irgendwelche Handler haben, die an Ereignisse auf diesem Steuerelement gebunden sind, wollen wir diese auch beibehalten. Zu diesem Zweck übergeben wir in true als ersten Parameter des Befehls clone Methode.

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

var control = $("#control");

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

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

Wenn das Klonen unter Beibehaltung der Ereignishandler zu Problemen führt, können Sie die Ereignisdelegation verwenden, um Klicks auf dieses Steuerelement von einem übergeordneten Element aus zu behandeln:

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

Dadurch wird verhindert, dass die Handler zusammen mit dem Element geklont werden müssen, wenn das Steuerelement aktualisiert wird.

Answer 3

Jquery soll sich um die Probleme mit Cross-Browsern/älteren Browsern für Sie kümmern.

Dies funktioniert auf modernen Browsern, die ich getestet habe: Chromium v25, Firefox v20, Opera v12.14

Verwendung von jquery 1.9.1

HTML

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

Jquery

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

Auf jsfiddle

Die folgende Javascript-Lösung funktionierte bei mir auch mit den oben genannten Browsern.

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

Auf jsfiddle

Ich habe keine Möglichkeit, mit dem IE zu testen, aber theoretisch sollte das funktionieren. Wenn der IE so unterschiedlich ist, dass die Javascript-Version nicht funktioniert, weil MS es anders gemacht hat, sollte die jquery-Methode meiner Meinung nach damit fertig werden, sonst wäre es wert, das jquery-Team darauf hinzuweisen, zusammen mit der Methode, die der IE erfordert. (Ich sehe Leute, die sagen, "dies wird nicht auf IE funktionieren", aber keine Vanille-Javascript zu zeigen, wie es auf IE funktioniert (angeblich ein "Sicherheits-Feature"?), vielleicht melden Sie es als ein Fehler zu MS zu (wenn sie es als solche zählen würde), so dass es in jeder neueren Version behoben wird)

Wie in einer anderen Antwort erwähnt, wurde ein Beitrag auf der Jquery-Forum

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

Aber jquery hat jetzt die Unterstützung für Browsertests entfernt, jquery.browser.

Diese Javascript-Lösung hat bei mir auch funktioniert, sie ist das Vanilla-Äquivalent des jquery.replaceWith Methode.

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

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

Auf jsfiddle

Wichtig ist dabei, dass die cloneNode Methode behält die zugehörigen Ereignishandler nicht bei.

Siehe dieses Beispiel.

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

Auf jsfiddle

Aber jquery.clone bietet dies [*1]

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

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

    fileopen.replaceWith(clone);
});

Auf jsfiddle

[*1] jquery ist in der Lage, dies zu tun, wenn die Ereignisse durch die Methoden von jquery hinzugefügt wurden, da es eine Kopie in jquery.data funktioniert es nicht anders, es ist also ein bisschen ein Schummeln/Workaround und bedeutet, dass die Dinge zwischen verschiedenen Methoden oder Bibliotheken nicht kompatibel sind.

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

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

    fileopen.replaceWith(clone);
});

Auf jsfiddle

Sie können den angehängten Event-Handler nicht direkt vom Element selbst abrufen.

Hier ist das allgemeine Prinzip in vanilla javascript, dies ist, wie jquery und alle anderen Bibliotheken tun es (grob).

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

Auf jsfiddle

Natürlich haben jquery und andere Bibliotheken alle anderen Methoden, die für die Pflege einer solchen Liste erforderlich sind, dies ist nur eine Demonstration.

Answer 4

Aus offensichtlichen Sicherheitsgründen können Sie den Wert einer Dateieingabe nicht setzen, auch nicht auf eine leere Zeichenkette.

Sie müssen nur das Formular zurücksetzen, in dem sich das Feld befindet, oder wenn Sie nur die Dateieingabe eines Formulars mit anderen Feldern zurücksetzen möchten, verwenden Sie dies:

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

Hier ist ein Beispiel dafür: http://jsfiddle.net/v2SZJ/1/

Answer 5

Das funktioniert bei mir.

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

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

Ich hoffe, es hilft.