SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:File-Upload-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload - 3</title>
<style>
input[type="file"] {
display: block;
margin: 1em;
padding: 1em;
border: thin dotted;
background: #fff;
}
form {
margin: 1em;
padding: 1em;
border: thin dotted;
background: #ddd;
}
#dateiListe, #thumbnailListe {
padding-left: 1.5em;
}
#thumbnailListe li{ display: inline;
}
#thumbnailListe img {
max-width: 100px;
max-height: 100px;
margin: 0.5em;
border: thin solid #ccc;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('dateien')
.addEventListener('change', dateiauswahlGeändert, false);
});
function dateiauswahlGeändert(event) {
const dateiliste = document.getElementById('dateiListe');
const thumbnailListe = document.getElementById('thumbnailListe');
dateiliste.innerHTML = '';
thumbnailListe.innerHTML = '';
for (const file of event.target.files) {
dateiliste.insertAdjacentHTML('beforeend',
`<li><strong>${file.name}</strong> (${file.type || 'n/a'}) - ${file.size} bytes</li>`);
// Check if file is an image
if (file.type.startsWith('image/')) {
const thumbnailURL = URL.createObjectURL(file);
const listItem = document.createElement('li');
const imgElement = document.createElement('img');
imgElement.src = thumbnailURL;
imgElement.alt = file.name;
imgElement.onload = () => URL.revokeObjectURL(imgElement.src);
listItem.appendChild(imgElement);
thumbnailListe.appendChild(listItem);
}
}
}
</script>
</head>
<body>
<h1>File Upload - 3</h1>
<form action="manage_uploads.php" method="post" enctype="multipart/form-data">
<label>Wählen Sie die hochzuladenden Dateien von Ihrem Rechner aus:
<input id="dateien" name="files[]" type="file" multiple>
</label>
<ul id="dateiListe"></ul>
<ul id="thumbnailListe"></ul>
<button>hochladen</button>
</form>
</body>
</html>
