文件上传（拖放）不起作用答案

【问题标题】：File upload (Drag and Drop) not working文件上传（拖放）不起作用
【发布时间】：2016-04-07 09:19:56
【问题描述】：

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

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

我按照教程执行此操作，但如前所述，它不起作用。希望您不要对德国 cmets 感到恼火。

我不知道为什么它不起作用，我根本没有收到任何错误（“正常可见”，控制台中也没有），并且网络选项卡显示文件 upload.php 似乎已加载...有人知道为什么它不起作用吗？

【问题讨论】：

标签： javascript php file-upload drag-and-drop

【解决方案1】：

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

仍然欢迎任何改进的提示！

【讨论】：