Also meins, sah mal so aus. Habs nie zum laufen gebracht. mal sehen wie deins klappt. Danke dir
Code
html:
<h1>Uploader</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;
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>
CSS:
.vorschau {
height: 150px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
output {
display: block;
}
JS:
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);
