JavaScript-Methode zum Löschen (Zurücksetzen) des INPUT-Elementwerts des Dateityps

Das Beispiel in diesem Artikel beschreibt, wie JavaScript das Löschen (Zurücksetzen) des Werts des Dateityp-INPUT-Elements implementiert. Geben Sie es als Referenz an alle weiter. Die Details lauten wie folgt:

Aufgrund von Sicherheitsbeschränkungen kann das Skript seinen Wert nicht willkürlich festlegen, sodass er nicht wie andere Formulareingabefelder mithilfe von Attributen zurückgesetzt werden kann.

Um den Wert eines Dateifelds zurückzusetzen, gibt es drei Hauptmethoden.

Dieser Artikel analysiert die Browserkompatibilität sowie die Vor- und Nachteile dieser drei Methoden und stellt den Code und die Demo einer relativ perfekten umfassenden Lösung bereit.

Drei Möglichkeiten, die Dateidomäne zurückzusetzen:

1. Setzen Sie das Wertattribut auf leer.

Gültig für IE11 oder höher und andere neuere moderne Nicht-IE-Browser Chrome/Firefox/Opera...

2. Klonen oder erstellen Sie ein neues Dateieingabeelement zum Ersetzen.

Verwenden Sie createElement oder cloneNode, um ein neues Element zum Ersetzen zu klonen oder zu erstellen, anwendbar auf alle Browser. Der Nachteil liegt ebenfalls auf der Hand: Nach dem Ersetzen gehen der ursprünglich gebundene Ereignis-Listener und einige benutzerdefinierte Expando-Attribute verloren. Es kann ohne dieses Problem verwendet werden, ist jedoch nicht universell. Ich empfehle die Verwendung dieser Methode nicht.

3. Rufen Sie die Methode reset() des Formularelements auf.

Die Methode „reset()“ des Formularelements setzt alle Eingabeelemente im Formular zurück. Dies ist nicht das, was wir erwarten, also können wir es umgehen, indem wir ein neues Formularobjekt erstellen und die Dateieingabeelemente einfügen Setzen Sie es zurück, nehmen Sie dann das Eingabeelement aus der Datei heraus und setzen Sie es wieder ein, damit die Nachteile von Methode 2 nicht auftreten.

Durch die Kombination von Methode 1 und Methode 3 kann es mit allen Browsern kompatibel sein.

Der JavaScript-Funktionscode lautet wie folgt:

function clearInputFile(f){
  if(f.value){
    try{
      f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
    }catch(err){
    }
    if(f.value){ //for IE5 ~ IE10
      var form = document.createElement('form'), ref = f.nextSibling, p = f.parentNode;
      form.appendChild(f);
      form.reset();
      p.insertBefore(f,ref);
    }
  }
}