it-swarm.com.de

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

Kann ein <input type='file' />-Steuerwert mit jQuery gelöscht werden? Ich habe folgendes versucht:

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

Aber es funktioniert nicht.

523
sagar

Einfach: Sie wickeln einen <form> um das Element, rufen Sie reset im Formular auf und entfernen Sie das Formular dann mit unwrap (). Im Gegensatz zu den clone () -Lösungen, die ansonsten in diesem Thread enthalten sind, erhalten Sie am Ende das gleiche Element (einschließlich der benutzerdefinierten Eigenschaften, die dort festgelegt wurden).

Getestet und arbeitet in Opera, Firefox, Safari, Chrome und IE6 +. Funktioniert auch für andere Arten von Formularelementen, mit Ausnahme von 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();
}

Wie Timo weiter unten vermerkt, müssen Sie, wenn Sie über die Schaltflächen verfügen, um das Zurücksetzen des Felds im <form> auszulösen, für das Ereignis "disableDefault" aufrufen, um zu verhindern, dass <button> ein Senden auslöst.

Bearbeiten

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

512
slipheed

Schnelle Antwort: Ersetzen Sie es.

Im folgenden Code verwende ich die replaceWith jQuery-Methode, um das Steuerelement durch einen Klon von sich selbst zu ersetzen. Wenn Sie über Handler verfügen, die an Ereignisse in diesem Steuerelement gebunden sind, möchten wir diese ebenfalls beibehalten. Dazu übergeben wir true als ersten Parameter der 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 ) );
});

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

Wenn beim Klonen unter Beibehaltung der Event-Handler alle Probleme auftreten, die möglicherweise die Delegierung von Ereignissen in Betracht ziehen, um Klicks auf dieses Steuerelement von einem übergeordneten Element zu verarbeiten:

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

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

427
Sampson

Jquery soll sich um die Browser-/älteren Browserprobleme 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 hat auch bei den oben genannten Browsern funktioniert.

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 IE unterschiedlich genug ist, dass die Javascript-Version nicht funktioniert, weil MS dies auf eine andere Art und Weise getan hat, sollte die Jquery-Methode meiner Meinung nach die Sache für Sie behandeln, ansonsten lohnt es sich, die Jquery darauf hinzuweisen Team zusammen mit der Methode, die IE erfordert. (Ich sehe Leute sagen "das funktioniert nicht bei IE"), aber kein Vanilla-Javascript, um zu zeigen, wie es auf IE funktioniert (angeblich eine "Sicherheitsfunktion"?), Kann es auch als Fehler an MS gemeldet werden (wenn sie es als solches zählen würden), damit es in einer neueren Version behoben wird)

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

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

Jquery hat jedoch die Unterstützung für Browsertests, jquery.browser, entfernt.

Diese Javascript-Lösung hat auch für mich funktioniert, es ist das Vanilla-Äquivalent der 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, dass die cloneNode -Methode die zugehörigen Event-Handler 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 ist dazu in der Lage, wenn die Ereignisse durch die Methoden von jquery hinzugefügt wurden, da eine Kopie in jquery.data aufbewahrt wird. Andernfalls funktioniert das nicht, daher ist es ein bisschen schummelig/umgangen und bedeutet, dass die Dinge nicht 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

Der angefügte Ereignishandler kann nicht direkt vom Element selbst abgerufen werden.

Hier ist das allgemeine Prinzip in Vanilla Javascript, so machen es jquery und 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 haben jquery und andere Bibliotheken auch alle anderen Unterstützungsmethoden, die zum Verwalten einer solchen Liste erforderlich sind. Dies ist nur eine Demonstration.

102
Xotic750

Aus offensichtlichen Sicherheitsgründen können Sie den Wert einer Dateieingabe auch nicht als leere Zeichenfolge festlegen.

Sie müssen lediglich das Formular zurücksetzen, in dem das Feld enthalten ist, oder wenn Sie nur die Dateieingabe eines Formulars mit anderen Feldern zurücksetzen möchten, 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/

48
Laurent

Das funktioniert für mich. 

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

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

Ich hoffe es hilft.

43
SyntaxError

In IE8 wurde das Feld zum Hochladen der Datei aus Sicherheitsgründen schreibgeschützt. Siehe den Blogeintrag des IE :

In der Vergangenheit war das Steuerelement für das Hochladen von HTML-Dateien () der Ursprung einer erheblichen Anzahl von Sicherheitsanfälligkeiten bezüglich der Offenlegung von Informationen. Um diese Probleme zu beheben, wurden zwei Änderungen am Verhalten des Steuerelements vorgenommen.

Um Angriffe zu blockieren, die auf Tastendrücken stehlen, um den Benutzer dazu zu bewegen, einen lokalen Dateipfad in das Steuerelement einzugeben, ist das Eingabefeld Dateipfad jetzt schreibgeschützt. Der Benutzer muss eine Datei explizit zum Hochladen im Dialogfeld "Dateisuche" auswählen.

Darüber hinaus wurde die URLAction "Lokalen Verzeichnispfad beim Hochladen von Dateien einschließen" für die Internetzone auf "Deaktivieren" gesetzt. Durch diese Änderung wird verhindert, dass potenziell sensible lokale Dateisysteminformationen in das Internet gelangen. Anstatt den vollständigen Pfad C:\Benutzer\ericlaw\documents\secret\image.png zu übermitteln, übermittelt Internet Explorer 8 jetzt nur noch den Dateinamen image.png.

20
Jon Galloway

Ich bin mit allen Optionen hier festgefahren. Hier ist ein Hack, den ich gemacht habe, 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 Code starten, der dem folgenden ähnelt:

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

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

12
Saneem

$("#control").val('') ist alles was Sie brauchen! In Chrome mit JQuery 1.11 getestet

Andere Benutzer haben auch in Firefox getestet.

11
Bodi

Ich endete damit:

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 zwar nicht die eleganteste Lösung, funktioniert aber soweit ich das beurteilen kann.

8
skvalen

Ich habe https://github.com/malsup/form/blob/master/jquery.form.js verwendet. Diese Funktion hat eine Funktion namens clearInputs(). Dies ist ein Crossbrowser, gut getestet, einfach zu bedienen und behandelt auch IE Löschung von ausgeblendeten Feldern bei Bedarf. Vielleicht eine etwas lange Lösung, um nur die Dateieingabe zu löschen, aber wenn Sie mit Crossbrowser-Dateiuploads arbeiten, wird diese Lösung empfohlen.

Die Verwendung ist einfach:

 // Alle Dateifelder löschen: 
 $ ("Input: file"). ClearInputs (); 

 // Auch ausgeblendete Felder löschen: 
 $ ("Input: file") .clearInputs (true); 

 // Löschen Sie bestimmte Felder: 
 $ ("# myfilefield1, # ​​myfilefield2"). clearInputs (); 
/** 
 * Löscht die ausgewählten Formularelemente .
 */
 $. fn.clearFields = $ .fn.clearInputs = Funktion (includeHidden) {
 var re =/^ (?: farbe | datum | datetime | email | monat | nummer | passwort | bereich | suche | tel | text | zeit | url | week) $/i; // 'hidden' ist nicht in dieser Liste enthalten 
 return this.each (function () {
 var t = this.type, tag = this.tagName.toLowerCase (); 
 if (re.test (t) || tag == 'textarea') { 
 this.value = ''; 
} 
 else if (t == 'Ankreuzfeld' || t == 'radio') {
 this.checked = false; 
}
 else if (tag == 'select') {
 this.selectedIndex = -1; 
} 
 else if (t == "Datei") {
 if (/ MSIE /. test (navigator.userAgent)) {
 $ (this) .replaceWith ($ (this) .clone (true)); 
} else {
 $ (this) .val ('') ;
} 
} 
 else if (includeHidden) {
 // includeHidden kann der Wert true sein oder eine Selektorzeichenfolge 
 //, die einen speziellen Test anzeigt, zum Beispiel: 
 // $ ('# myForm'). clearForm ('. special: hidden') 
 // Hiermit werden verborgene Eingaben mit der Klasse 'special' 
 if ((includeHidden === true) entfernt&& /hidden/.test(t)) || 
 (typeof includeHidden == 'string' && $ (this) .is (includeHidden))) 
 this.value = ''; 
 } 
 }); 
}; 
8
Timo Kähkönen

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

5
Quentin

Ich konnte meinen mit dem folgenden Code arbeiten lassen:

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

Ich habe es geschafft, dies mit den folgenden Mitteln zum Laufen zu bringen ...

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

  1. In FF funktioniert es immer noch nicht richtig. Wenn Sie die Seite aktualisieren, wird das Dateielement erneut mit der ausgewählten Datei gefüllt. Woher diese Informationen kommen, liegt mir nicht. Was könnte ich sonst noch mit einem Dateieingabeelement in Verbindung bringen?

  2. Denken Sie daran, die Delegierung für alle Ereignisse zu verwenden, die Sie an das Dateieingabeelement angehängt haben, damit sie auch nach dem Klonen funktionieren.

Was ich nicht verstehe, ist, wer auf der Erde der Meinung war, dass Sie nicht zulassen könnten, dass ein Eingabefeld von einer ungültigen inakzeptablen Dateiauswahl gelöscht wird?

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

Es ist nicht so, als würde "Accept" irgendetwas anderes tun als einen Filter und in IE10 versteht es nicht einmal MS-Mime-Typen, es ist ein Witz!

4
1DMF

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

Die engste Methode war für mich die frühere Methode von Jonathan, jedoch musste sichergestellt werden, dass das Feld seinen Namen, Klassen usw. für unordentlichen Code in meinem Fall beibehalten hat.

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)
}
4
SpoonNZ

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

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

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

alle Kredite gehen 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>

3
chebaby

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

Bei meinem Firefox 40.0.3 funktioniert das nur

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

Ich habe die meisten der von den Benutzern genannten Techniken ausprobiert, aber keine davon funktionierte in allen Browsern. Das heißt: clone () funktioniert nicht in FF für Dateieingaben ..__ Ich habe die Dateieingabe manuell kopiert und dann das Original durch die 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);
1
Juan
function clear() {
    var input = document.createElement("input");
    input.setAttribute('type', 'file');
    input.setAttribute('value', '');
    input.setAttribute('id', 'email_attach');

    $('#email_attach').replaceWith( input.cloneNode() );
}
0

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>
0
JEPAAB

es funktioniert nicht für mich:

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

in asp mvc verwende ich Rasierer-Funktionen zum Ersetzen der Dateieingabe . 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.

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

@attachmentInput

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

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"</div>");
$("#fileWrapper").html($("#duplicateFile").html());
0
Niraj

Benutz einfach ,

 $("#fileUploaderID").val(''); 
0
Thisara Subath