Warum steht Variable in Funktion nicht zur Verfügung (Frage zum Wiki-Artikel „File Upload“)

[Nico R.]

Hallo Rolf,

ich weiß gar nicht, wo ich anfangen soll. Das kommt davon, wenn man zu viel fremden Code einfach kopiert, ohne ihn zu verstehen.

Und dann noch dies: die Anzahl der Schleifendurchläufe solltest du über i<files.length steuern, nicht darüber dass Javascript undefined liefert, wenn du hinter dem Ende des Arrays zugreifst.

Richtig. Das war eigentlich der Grund des Übels. Das mache ich sonst so gar nicht, ich kannte das Prinzip nicht mal. Mir ist das leider erst jetzt aufgefallen, und erst jetzt lese ich auch deine Bemerkung dazu.

Das mit dem "gehoben" werden von var war mir gar nicht so bewusst. Vermutlich auch, weil ich in Schleifen eigentlich generell nur noch let verwende. Aber das dürfte in diesem Fall nicht der alleinige Grund gewesen sein...

Das ist aber immer die gleiche Variable, und weil deine Schleife endet, wenn du hinter das Ende des files-Arrays kommst und f undefined wird, ist bei Ausführung des load Events f immer undefined.

Normalerweise hätten ja die ersten vorhandenen Array-Einträge auch mit var angezeigt werden müssen. Das "Problem" war zusätzlich, dass reader.readAsDataURL(f) (das fehlte in meinem geposteten Script), asynchron abläuft, richtig? Das heißt, in dem Moment als das Ding die Dateiinformationen bzw. das Vorschaubild anzeigen sollte, war die Schleife schon durch und lieferte durch var (fälschlich) für alle drei onloads undefined. Mit let funktioniert das aber offensichtlich trotz asynchroner Ausführung trotzdem korrekt. Hab ich das richtig verstanden?

Zu Vollständigkeit - das korrigierte und gekürzte Codestück sieht dann jetzt so aus:

function dateiauswahl(event) {
  let files = event.target.files;

  for(let i=0; i<files.length; i++) {
    let f = files[i];
    let reader = new FileReader();

    reader.addEventlistener("load", function(event) {
      console.log(f.name); // Ausgabe: Dateiname
      img.src = event.target.result; // Vorschaubild
    });
  } 

  reader.readAsDataURL(f);
}

Besten Dank und schöne Grüße

Nico