<Input type = 'file' /> mit jQuery löschen

Ist es möglich, einen <input type='file' />Steuerwert mit jQuery zu löschen ? Ich habe folgendes versucht:

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

Aber es funktioniert nicht.

Einfach: Sie wickeln ein <form>um das Element, rufen Reset für das Formular auf und entfernen das Formular mit .unwrap(). Im Gegensatz zu den anderen .clone()Lösungen in diesem Thread erhalten Sie am Ende dasselbe Element (einschließlich der benutzerdefinierten Eigenschaften, die darauf 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 unten bemerkt, <form>müssen Sie .preventDefault()das Ereignis aufrufen , wenn Sie über die Schaltflächen verfügen, mit denen Sie das Zurücksetzen des Felds innerhalb <button>von auslösen können , um zu verhindern, dass das Senden ausgelöst wird.

BEARBEITEN

Funktioniert in IE 11 aufgrund eines nicht behobenen Fehlers nicht. Der Text (Dateiname) wird bei der Eingabe gelöscht, die FileListe bleibt jedoch gefüllt.

Schnelle Antwort: Ersetzen Sie es.

Im folgenden Code verwende ich die replaceWithjQuery-Methode, um das Steuerelement durch einen eigenen Klon zu ersetzen. Falls Handler an Ereignisse in diesem Steuerelement gebunden sind, möchten wir diese ebenfalls beibehalten. Dazu übergeben wir trueals ersten Parameter der cloneMethode.

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

var control = $("#control");

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

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

Wenn beim Klonen unter Beibehaltung der Ereignishandler Probleme auftreten, können Sie die Ereignisdelegierung verwenden, um Klicks auf dieses Steuerelement von einem übergeordneten Element aus zu verarbeiten:

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

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

Jquery soll sich um die Probleme zwischen Browsern und älteren Browsern kümmern.

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

Verwenden 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 auch für mich in den oben genannten Browsern.

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

Auf jsfiddle

Ich habe keine Möglichkeit, mit IE zu testen, aber theoretisch sollte dies funktionieren. Wenn der IE so unterschiedlich ist, dass die Javascript-Version nicht funktioniert, weil MS dies auf andere Weise getan hat, sollte die jquery-Methode meiner Meinung nach für Sie damit umgehen, andernfalls lohnt es sich, das jquery-Team zusammen mit dem darauf hinzuweisen Methode, die IE benötigt. (Ich sehe Leute, die sagen "das funktioniert nicht im Internet Explorer", aber kein Vanille-Javascript, um zu zeigen, wie es im Internet Explorer funktioniert (angeblich ein "Sicherheitsmerkmal"?). Vielleicht melden sie es auch MS als Fehler (wenn sie dies tun würden) zähle es als solches), damit es in jeder neueren Version behoben wird)

Wie in einer anderen Antwort erwähnt, ein Beitrag im jquery-Forum

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

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

Diese Javascript-Lösung hat auch bei mir funktioniert. Sie ist das Vanille-Äquivalent der Methode jquery.replaceWith .

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

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

Auf jsfiddle

Es ist wichtig zu beachten, dass die cloneNode- Methode die zugehörigen Ereignishandler nicht beibehält .

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 an ^{[* 1]}

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

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

    fileopen.replaceWith(clone);
});

Auf jsfiddle

^{[* 1]} jquery kann dies tun, wenn die Ereignisse mit den Methoden von jquery hinzugefügt wurden, da eine Kopie in jquery.data gespeichert ist. Andernfalls funktioniert es nicht, ist also ein bisschen betrügerisch und bedeutet, dass die Dinge nicht so sind kompatibel zwischen verschiedenen Methoden oder Bibliotheken.

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 Ereignishandler nicht direkt vom Element selbst abrufen.

Hier ist das allgemeine Prinzip in Vanille-Javascript: So machen es alle anderen Bibliotheken (ungefähr).

(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 verfügen jquery und andere Bibliotheken über alle anderen Unterstützungsmethoden, die für die Pflege einer solchen Liste erforderlich sind. Dies ist nur eine Demonstration.

Aus offensichtlichen Sicherheitsgründen können Sie den Wert einer Dateieingabe nicht einmal auf eine leere Zeichenfolge festlegen.

Alles, was Sie tun müssen, ist das Formular zurückzusetzen, in dem sich das Feld befindet, oder wenn Sie nur die Dateieingabe eines Formulars zurücksetzen möchten, das andere Felder enthält, verwenden Sie Folgendes:

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

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

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.

In IE8 wurde das Feld "Datei-Upload" aus Sicherheitsgründen schreibgeschützt. Siehe den Blog-Beitrag des IE-Teams :

In der Vergangenheit war das HTML File Upload Control () die Quelle einer erheblichen Anzahl von Sicherheitslücken bei der Offenlegung von Informationen. Um diese Probleme zu beheben, wurden zwei Änderungen am Verhalten des Steuerelements vorgenommen.

Um Angriffe zu blockieren, bei denen Tastenanschläge gestohlen werden müssen, um den Benutzer heimlich dazu zu bringen, einen lokalen Dateipfad in das Steuerelement einzugeben, ist das Bearbeitungsfeld Dateipfad jetzt schreibgeschützt. Der Benutzer muss im Dialogfeld "Dateisuche" explizit eine Datei zum Hochladen auswählen.

Darüber hinaus wurde die URLAction "Lokalen Verzeichnispfad beim Hochladen von Dateien einschließen" für die Internetzone auf "Deaktivieren" gesetzt. Diese Änderung verhindert, dass potenziell sensible lokale Dateisysteminformationen ins Internet gelangen. Anstatt beispielsweise den vollständigen Pfad C: \ users \ ericlaw \ documents \ secret \ image.png zu senden, sendet Internet Explorer 8 jetzt nur den Dateinamen image.png.

$("#control").val('')ist alles, was du brauchst! Getestet auf Chrome mit JQuery 1.11

Andere Benutzer haben ebenfalls in Firefox getestet.

Ich bin mit all den Optionen hier festgefahren. Hier ist ein Hack, den ich gemacht habe und der funktioniert hat:

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

und Sie können den Reset mit jQuery mit einem ähnlichen Code auslösen:

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

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

Am Ende hatte ich Folgendes:

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

ist vielleicht nicht die eleganteste Lösung, aber soweit ich das beurteilen kann, funktioniert sie.

Ich habe https://github.com/malsup/form/blob/master/jquery.form.js verwendet , das eine Funktion namens hat clearInputs(), die Crossbrowser ist, gut getestet, einfach zu bedienen ist und auch IE-Probleme und das Löschen versteckter Felder behandelt wenn benötigt. Vielleicht eine etwas lange Lösung, um nur Dateieingaben zu löschen, aber wenn Sie es mit Crossbrowser-Datei-Uploads zu tun haben, wird diese Lösung empfohlen.

Die Verwendung ist einfach:

// Alle Dateifelder löschen:
$ ("input: file"). clearInputs ();

// Lösche auch versteckte Felder:
$ ("input: file"). clearInputs (true);

// Bestimmte Felder löschen:
$ ("# myfilefield1, # ​​myfilefield2"). clearInputs ();

/ **
 * Löscht die ausgewählten Formularelemente.
 * /
$ .fn.clearFields = $ .fn.clearInputs = Funktion (includeHidden) {
    var re = / ^ (?: Farbe | Datum | Datum / Uhrzeit | E-Mail | Monat | Nummer | Passwort | Bereich | Suche | Tel | Text | Zeit | URL | Woche) $ / i; // 'versteckt' ist nicht in dieser Liste
    return this.each (function () {
        var t = this.type, tag = this.tagName.toLowerCase ();
        if (re.test (t) || tag == 'textarea') {
            this.value = '';
        }}
        sonst wenn (t == 'checkbox' || t == 'radio') {
            this.checked = false;
        }}
        sonst wenn (tag == 'select') {
            this.selectedIndex = -1;
        }}
        sonst wenn (t == "Datei") {
            if (/MSIE/.test(navigator.userAgent)) {
                $ (this) .replaceWith ($ (this) .clone (true));
            } else {
                $ (this) .val ('');
            }}
        }}
        sonst wenn (includeHidden) {
            // includeHidden kann der Wert true oder eine Auswahlzeichenfolge sein
            // einen speziellen Test anzeigen; zum Beispiel:
            // $ ('# myForm'). clearForm ('. special: hidden')
            // das obige würde versteckte Eingaben bereinigen, die die Klasse 'special' haben
            if ((includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $ (this) .is (includeHidden)))
                this.value = '';
        }}
    });
};

Der Wert von Dateieingaben ist schreibgeschützt (aus Sicherheitsgründen). Sie können es nicht programmgesteuert löschen (außer durch Aufrufen der reset () -Methode des Formulars, die einen breiteren Bereich als nur dieses Feld hat).

Ich konnte meine mit dem folgenden Code zum Laufen bringen:

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

Ich habe nach einer einfachen und sauberen Möglichkeit gesucht, die Eingabe von HTML-Dateien zu löschen. Die obigen Antworten sind großartig, aber keine von ihnen beantwortet wirklich das, wonach ich suche, bis ich im Web auf einfache und elegante Weise darauf gestoßen bin:

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

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

Der ganze Kredit geht an 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>

Das .clone()Ding funktioniert nicht in Opera (und möglicherweise anderen). Es behält den Inhalt.

Die für mich am nächsten liegende Methode war die von Jonathan, stellte jedoch sicher, dass das Feld seinen Namen, seine Klassen usw. beibehielt, was in meinem Fall für unordentlichen Code sorgte.

So etwas könnte gut funktionieren (auch dank Quentin):

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

Ich habe es geschafft, dies mit den folgenden ...

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

Dies wurde in IE10, FF, Chrome & Opera getestet.

Es gibt zwei Einschränkungen ...

1. Funktioniert in FF immer noch nicht richtig. Wenn Sie die Seite aktualisieren, wird das Dateielement erneut mit der ausgewählten Datei gefüllt. Woher diese Informationen kommen, ist mir ein Rätsel. Was könnte ich sonst noch versuchen, ein Dateieingabeelement zu löschen?

2. Denken Sie daran, die Delegierung für alle Ereignisse zu verwenden, die Sie an das Dateieingabeelement angehängt haben, damit sie auch dann funktionieren, wenn der Klon erstellt wird.

Was ich nicht verstehe, ist, wer in aller Welt dachte, es sei eine gute Idee, Ihnen nicht zu erlauben, ein Eingabefeld aus einer ungültigen, nicht akzeptablen Dateiauswahl zu löschen?

OK, lassen Sie mich nicht dynamisch einen Wert festlegen, damit ich keine Dateien aus dem Betriebssystem eines Benutzers auslaugen kann, sondern eine ungültige Auswahl löschen, ohne ein gesamtes Formular zurückzusetzen.

Es ist sowieso nicht so, dass 'accept' etwas anderes als einen Filter macht und in IE10 versteht es nicht einmal MS Word Mime-Typen, es ist ein Witz!

Auf meinem Firefox 40.0.3 funktioniert nur damit

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

Es funktioniert für mich in jedem Browser.

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

Ich habe es mit den meisten Techniken versucht, die die Benutzer erwähnt haben, aber keine davon hat in allen Browsern funktioniert. dh: clone () funktioniert in FF nicht für Dateieingaben. Am Ende habe ich die Dateieingabe manuell kopiert und dann das Original durch das kopierte ersetzt. Es funktioniert in allen Browsern.

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

Dies funktioniert mit Chrome, FF und Safari

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

Funktioniert möglicherweise nicht mit IE oder Opera

Machen Sie es asynchron und setzen Sie es zurück, nachdem die gewünschten Aktionen der Schaltfläche ausgeführt wurden.

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

es funktioniert nicht bei mir:

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

Daher verwende ich in asp mvc Rasiermesserfunktionen zum Ersetzen von Dateieingaben. Erstellen Sie zunächst eine Variable für die Eingabezeichenfolge mit ID und Name und verwenden Sie sie dann zum Anzeigen auf der Seite und zum Ersetzen beim Zurücksetzen. Klicken Sie auf:

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

@attachmentInput

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

Eine einfache Möglichkeit besteht darin, den Eingabetyp zu ändern und wieder zurückzusetzen.

Etwas wie das:

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

Sie können es wie folgt durch seinen Klon ersetzen

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

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

Aber das klont auch mit seinem Wert, also solltest du es besser mögen

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

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

Es ist einfach lol (funktioniert in allen Browsern [außer Oper]):

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

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

Was? Geben Sie in Ihre Validierungsfunktion einfach ein

document.onlyform.upload.value="";

Angenommen, Upload ist der Name:

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

Ich benutze JSP, bin mir nicht sicher, ob das einen Unterschied macht ...

Funktioniert für mich und ich denke, es ist viel einfacher.