Question

我尝试在我的网站上实现拖放功能，以便将文件上传到服务器。但它不起作用，这是我使用的代码：

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']);
}

我按照教程来做这件事，但正如所说，它没有用。希望你不要对德国的评论感到恼火。

我不知道为什么它不能正常工作，我根本没有任何错误（＃34;通常可见＆＃34;，也没有在控制台中），网络标签显示文件{{1似乎被加载了...有没有人知道它为什么不起作用？

Answer 1

好的，问题解决了...这不是关于代码，我的服务器上的我的www-data用户不是“uploads”文件夹的所有者，因此无权上传..

仍然欢迎任何改进提示！

文件上传（拖放）无效

1 个答案: