1
Ich habe versucht, eine Drag-and-Drop-Funktionalität auf meiner Site zu implementieren, um Dateien auf den Server hochzuladen. Aber es funktioniert nicht, das ist der Code, den ich verwendet:Datei-Upload (Drag and Drop) funktioniert nicht
main.php
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop Upload</title>
<script src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
<div id="uploadzone" style="width: 100px; height: 100px; background-color: red"></div>
<span id="progress">Aktueller Fortschritt: 0%</span>
<script type="text/javascript" src="upload.js"></script>
</body>
</html>
upload.js
var filelist = []; // Ein Array, das alle hochzuladenden Files enthält
var totalSize = 0; // Enthält die Gesamtgröße aller hochzuladenden Dateien
var totalProgress = 0; // Enthält den aktuellen Gesamtfortschritt
var currentUpload = null; // Enthält die Datei, die aktuell hochgeladen wird
var uploadzone = document.getElementById('uploadzone');
if(uploadzone) {
uploadzone.addEventListener('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
uploadzone.addEventListener('drop', handleDropEvent, false);
}
function handleDropEvent(event)
{
event.stopPropagation();
event.preventDefault();
// event.dataTransfer.files enthält eine Liste aller gedroppten Dateien
for (var i = 0; i < event.dataTransfer.files.length; i++)
{
filelist.push(event.dataTransfer.files[i]); // Hinzufügen der Datei zur Uploadqueue
totalSize += event.dataTransfer.files[i].size; // Hinzufügen der Dateigröße zur Gesamtgröße
}
}
function startNextUpload()
{
if (filelist.length) // Überprüfen, ob noch eine Datei hochzuladen ist
{
currentUpload = filelist.shift(); // nächste Datei zwischenspeichern
uploadFile(currentUpload); // Upload starten
}
}
function uploadFile(file)
{
var xhr = new XMLHttpRequest(); // den AJAX Request anlegen
xhr.open('POST', 'upload.php'); // Angeben der URL und des Requesttyps
var formdata = new FormData(); // Anlegen eines FormData Objekts zum Versenden unserer Datei
formdata.append('uploadfile', file); // Anhängen der Datei an das Objekt
xhr.send(formdata); // Absenden des Requests
xhr.upload.addEventListener("progress", handleProgress);
xhr.addEventListener("load", handleComplete);
xhr.addEventListener("error", handleError);
}
function handleComplete(event)
{
totalProgress += currentUpload.size; // Füge die Größe dem Gesamtfortschritt hinzu
startNextUpload(); // Starte den Upload der nächsten Datei
}
function handleError(event)
{
alert("Upload failed"); // Die Fehlerbehandlung kann natürlich auch anders aussehen
totalProgress += currentUpload.size; // Die Datei wird dem Progress trotzdem hinzugefügt, damit die Prozentzahl stimmt
startNextUpload(); // Starte den Upload der nächsten Datei
}
function handleProgress(event)
{
var progress = totalProgress + event.loaded; // Füge den Fortschritt des aktuellen Uploads temporär dem gesamten hinzu
document.getElementById('progress').innerHTML = 'Aktueller Fortschritt: ' + (progress/totalSize) + '%';
}
upload.php
<?php
$file = $_FILES['uploadfile'];
if (!empty($file['name']))
{
move_uploaded_file($file['tmp_name'], "uploads/".$file['name']);
}
ich ein Tutorial gefolgt, dies zu tun, sondern als sagte, es funktioniert nicht. Hoffe du bist nicht zu verärgert über die deutschen Kommentare.
Ich habe keine Ahnung, warum es nicht funktioniert, bekomme ich überhaupt keine Fehler (weder "normalerweise sichtbar", noch in der Konsole) und die Netzwerkkarten zeigt mir, dass die Datei upload.php scheint geladen zu werden ... Hat jemand eine Idee, warum es nicht funktioniert?