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

Der Wert der Dateieingaben ist nur lesbar (aus Sicherheitsgründen). Sie können ihn nicht programmatisch löschen (außer durch den Aufruf der reset()-Methode des Formulars, die einen breiteren Anwendungsbereich als nur dieses Feld hat).

Answer 2

Ich habe für einfache und saubere Art und Weise zu löschen HTML-Datei-Eingabe, die oben genannten Antworten sind groß, aber keiner von ihnen wirklich Antworten, was ich suche, bis ich auf dem Web mit einfachen und eleganten Weg, es zu tun kam:

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

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

die ganze Anerkennung 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>

Answer 3

Mit folgendem Code habe ich mein System zum Laufen gebracht:

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

Answer 4

Ich habe es geschafft, dies mit der folgenden Methode 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 und Opera getestet.

Es gibt zwei Vorbehalte...

1. In FF funktioniert es immer noch nicht richtig. Wenn Sie die Seite aktualisieren, wird das Dateielement mit der ausgewählten Datei neu aufgefüllt. Woher es diese Information nimmt, ist mir schleierhaft. Was könnte ich sonst noch im Zusammenhang mit einem Dateieingabeelement versuchen zu löschen?

2. Denken Sie daran, alle Ereignisse, die Sie an das Dateieingabeelement angehängt haben, zu delegieren, damit sie auch nach dem Klonen noch funktionieren.

Was ich nicht verstehe, ist, wer um alles in der Welt dachte, dass es eine gute Idee sei, ein Eingabefeld bei einer ungültigen, inakzeptablen Dateiauswahl nicht zu löschen?

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

Es ist nicht so, dass "Akzeptieren" irgendetwas anderes tut als einen Filter, und im IE10 versteht es nicht einmal die MS Word-Mime-Typen, es ist ein Witz!

Answer 5

Bei meinem Firefox 40.0.3 funktioniert das nur mit diesem

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