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

Die jQuery-Lösung, die @dhaval-marthak in den Kommentaren gepostet hat, funktioniert offensichtlich, aber wenn Sie sich den tatsächlichen jQuery-Aufruf ansehen, ist es ziemlich einfach zu erkennen, was jQuery tut, indem es einfach das value-Attribut auf einen leeren String setzt. Also in "reinem" JavaScript wäre es:

document.getElementById("uploadCaptureInputFile").value = "";

Answer 2

Sie müssen in die

-Tags einwickeln und dann können Sie die Eingabe zurücksetzen, indem Sie Ihr Formular zurücksetzen:

onClick="this.form.reset()"

Answer 3

Dies ist die BESTE Lösung:

input.value = ''

if(!/safari/i.test(navigator.userAgent)){
  input.type = ''
  input.type = 'file'
}

Von allen Antworten hier ist dies die schnellste Lösung. Kein Eingabe-Klon, kein Formular-Reset!

Ich habe es in allen Browsern überprüft (es hat sogar IE8-Unterstützung).

Answer 4

Wenn Sie folgendes haben:

dann machen Sie einfach:

$("#fileControl").val('');

um das Dateikontrollkästchen zurückzusetzen.

Answer 5

Ein weiter Lösungsansatz (ohne Auswahl von HTML-DOM-Elementen)

Wenn Sie einen 'change'-Ereignishandler auf das Eingabefeld hinzufügen, können Sie im JavaScript-Code (für bestimmte Bedingungen) folgendes aufrufen:

event.target.value = '';

Zum Beispiel in HTML:

Und im JavaScript:

onChangeFunction(event) {
  let fileList = event.target.files;
  let file = fileList[0];
  let extension = file.name.match(/(?<=\.)\w+$/g)[0].toLowerCase(); // unter der Annahme, dass diese Datei eine Dateierweiterung hat

  if (extension === 'jpg') {
    alert('Gültige Dateierweiterung!');
  }
  else {
    event.target.value = '';
    alert('Falsche Dateierweiterung! Die Dateieingabe wurde gelöscht.');
  }