我尝试在我的网站上实现拖放功能，以便将文件上传到服务器。但它不起作用，这是我使用的代码：
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']);
}
我遵循了一个教程来做这件事，但正如所说，它不起作用。希望你不要被德国人的评论激怒。
我不知道为什么它不工作，我没有任何错误（既不是"正常可见"，也不是在控制台中），网络选项卡显示文件upload.php似乎已加载。。。有人知道为什么它不起作用吗？
好的，问题解决了。。。这与代码无关，我的服务器上的www数据用户不是"上传"文件夹的所有者，因此无权上传。。
任何需要改进的建议仍然欢迎