Beispiel:File-Upload-4.html
Aus SELFHTML-Wiki
(Weitergeleitet von Beispiel:JS File-3.html)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload - 4</title>
<style>
input[type="file"] {
display: block;
margin: 1em;
padding: 1em;
border: thin dotted;
background: #fff;
cursor: pointer;
}
#dropZone {
background-color: #f0f0f0;
border: medium dashed #c82f04;
transition: background-color 0.3s;
}
#dropZone.dragover {
background-color: #e0e0ff;
}
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 () {
const fileInput = document.getElementById('dateien');
const dropZone = document.getElementById('dropZone');
fileInput.addEventListener('change', dateiauswahlGeändert, false);
// Drag and Drop event listeners
dropZone.addEventListener('dragenter', preventDefaults, false);
dropZone.addEventListener('dragover', preventDefaults, false);
dropZone.addEventListener('dragleave', preventDefaults, false);
dropZone.addEventListener('drop', handleDrop, false);
dropZone.addEventListener('dragenter', () => dropZone.classList.add('dragover'), false);
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'), false);
dropZone.addEventListener('drop', () => dropZone.classList.remove('dragover'), false);
});
// Prevent default behaviors on drag and drop events
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
// Handle files dropped into the drop zone
function handleDrop(e) {
preventDefaults(e);
const dt = e.dataTransfer;
const files = dt.files;
dateiauswahlGeändert({ target: { files } });
}
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) {
// Add file details to dateiListe
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); // Release memory when loaded
listItem.appendChild(imgElement);
thumbnailListe.appendChild(listItem);
}
}
}
</script>
</head>
<body>
<h1>File Upload mit Drag & Drop</h1>
<form id="dropZone" 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>
Ziehen Sie die Dateien hierher, um sie hochzuladen.
</label>
<ul id="dateiListe"></ul>
<ul id="thumbnailListe"></ul>
<button>hochladen</button>
</form>
</body>
</html>
