1
ファイルをサーバーにアップロードするために自分のサイトにドラッグアンドドロップ機能を実装しようとしました。しかし、それは働いていない、これは私が使用するコードです：ファイルのアップロード（ドラッグアンドドロップ）が動作しない
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がロードされているようですそれがなぜ機能しないのか？