JavaScript-Funktion nur einmal aufgerufen statt jedes Mal

Question

Ich brauche einen Javascript-Code, der die Größe der Eingabedatei vor dem Hochladen jedes Mal überprüft, wenn der Eingabewert sich ändert (d. H. Jedes Mal, wenn der Benutzer eine Datei zum Hochladen auswählt).

Bisher kam ich mit auf den Punkt:

var file = document.getElementById("myFile"); 
    file.addEventListener('change', function() { 
     if (this.files[0].size > 2*1024*1024) { 
      alert('Max file size is 2 MB'); 
      file.removeAttribute('value'); 
      file.parentNode.replaceChild(file.cloneNode(true),file); 
      } 
     } 
    ); 

und die HTML ist:

<form action="?" method="post"> 
    <input type="file" id="myFile" name="myFile" /> 
    <input type="submit" value="upload" /> 
</form> 

Nun, wenn ich den Javascript-Code wie das verlassen, funktioniert es nicht an alle. Aber wenn ich ändern Sie es wie diese

window.onload = function() { 

     // Same code above 

} 

es funktioniert, aber nur für die erste Datei der Benutzer auswählt.

Wie kann ich es ändern, damit es funktioniert jedes Mal der Benutzer wählt eine Datei aus? (möglichst ohne jQuery)

Answer 1

Es ist nicht notwendig, den Knoten zu klonen usw. ... einfach den Wert auf '';

file.value = ''; 

siehe Arbeits

Snippet

document.getElementById("myFile").addEventListener('change', function() { 
 
    if (this.files[0].size > 2*1024*1024) { 
 
    alert('Max file size is 2 MB'); 
 
    this.value=''; 
 
    } 
 
});

<form action="?" method="post"> 
 
    <input type="file" id="myFile" name="myFile" /> 
 
    <input type="submit" value="upload" /> 
 
</form>

Answer 2

Von the documentation for cloneNode:

ein Knoten Kopien Cloning alle ihre Attribute und deren Werte, einschließlich der intrinsischen (in-line) Hörern. Er kopiert nicht Event-Listener hinzugefügt mit addEventListener()

Sie sind auf sie das Element mit dem Event-Handler zu löschen und es mit einem zu ersetzen, die nicht Hörer eine Änderung

Sie benötigen muss Rufen Sie addEventListener wieder auf (und speichern Sie file.cloneNode(true), in einer Variablen, so können Sie addEventListener darauf anrufen und übergeben Sie es an replaceChild).