Wie man <input type = "file"> in Angular zurücksetzt

Question

Ich entwickle eine Metro-App mit VS2012 und Javascript

Ich möchte den Inhalt meines Dateieingabefelds zurücksetzen:

Wie soll ich das machen?

Answer 1

Sie können es einfach klonen und mit sich selbst ersetzen, wobei alle Ereignisse noch angefügt sind:

und

var input = $("#control");

function something_happens() {
    input.replaceWith(input.val('').clone(true));
};

Danke: Css-tricks.com

Answer 2

document.getElementById('uploadFile').value = "";

Wird funktionieren, aber wenn Sie Angular verwenden, wird es sagen: "Eigenschaft 'value' existiert nicht auf Typ 'HTMLElement'.any"

document.getElementById() gibt den Typ HTMLElement zurück, der keine value-Eigenschaft enthält. Daher muss es in HTMLInputElement umgewandelt werden

(document.getElementById('uploadFile')).value = "";

ZUSÄTZLICH :-

Jedoch sollten wir keine DOM-Manipulation (document.xyz()) in Angular verwenden.

Angular hat dafür @ViewChild, @ViewChildren, usw. bereitgestellt, die document.querySelector(), document.queryselectorAll() entsprechen.

Sogar ich habe es nicht gelesen. Besser den Blogs von Experten folgen

Lesen Sie diesen Link1, Link2

Answer 3

LÖSUNG

Der folgende Code hat für mich mit jQuery funktioniert. Es funktioniert in jedem Browser und ermöglicht es, Ereignisse und benutzerdefinierte Eigenschaften beizubehalten.

var $el = $('#uploadCaptureInputFile');
$el.wrap('

DEMO

Siehe dieses jsFiddle für Code und Demonstration.

LINKS

Siehe Wie man Dateieingabe mit JavaScript zurücksetzt für weitere Informationen.

Answer 4

Das Zurücksetzen eines Datei-Upload-Buttons ist mit purem JavaScript so einfach!

Es gibt einige Möglichkeiten, dies zu tun, aber der einfachste Weg, der in vielen Browsern gut funktioniert, besteht darin, den Feldwert auf nichts zu ändern. Auf diese Weise wird das Upload-Feld zurückgesetzt. Versuchen Sie auch, reines JavaScript anstelle eines Frameworks zu verwenden. Nachfolgend habe ich den Code erstellt, schauen Sie ihn sich einfach an (ES6):

function resetFile() {
  const file = document.querySelector('.file');
  file.value = '';
}

Datei zurücksetzen

Answer 5

Ich vermisse hier eine andere Lösung (2021): Ich verwende FileList, um mit Datei-Uploads zu interagieren.

Da es keine Möglichkeit gibt, ein FileList-Objekt zu erstellen, verwende ich DataTransfer, das eine saubere FileList mitbringt.

Ich setze es zurück mit:

  file_input.files=new DataTransfer().files  

In meinem Fall passt das perfekt, da ich nur über FileList mit meinem eingekapselten Datei-Upload-Element interagiere.