Beispiel:File-Upload-4.html

Aus SELFHTML-Wiki
(Weitergeleitet von Beispiel:JS File-3.html)
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <title>JS - File Upload - 3</title>
  <style>
.vorschau {
  height: 150px;
  border: 1px solid #000;
  margin: 10px 5px 0 0;
}

output {
  display: block;
}

  </style>
</head>
<body>
  <h1>JS - File Upload - 3</h1>
  <main>
    <p>Wählen Sie Dateien aus. Von Bildern werden Vorschaubilder erzeugt.</p>
    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>
  </main>
<script>
  function dateiauswahl(evt) {
    var dateien = evt.target.files; // FileList object

    // Auslesen der gespeicherten Dateien durch Schleife
    for (var i = 0, f; f = dateien[i]; i++) {

      // nur Bild-Dateien
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      reader.onload = (function(theFile) {
        return function(e) {
          // erzeuge Thumbnails.
          var vorschau = document.createElement('img');
		  vorschau.className = 'vorschau';
		  vorschau.src   = e.target.result;
		  vorschau.title = theFile.name;
          document.getElementById('list').insertBefore(vorschau, null);
        };
      })(f);

      // Bilder als Data URL auslesen.
      reader.readAsDataURL(f);
    }
  }
  // Auf neue Auswahl reagieren und gegebenenfalls Funktion dateiauswahl neu ausführen.
  document.getElementById('files').addEventListener('change', dateiauswahl, false);
</script>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:File-Upload-4.html&oldid=88465“