文件上傳（拖放）無效

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

我按照教程來做這個，但正如所說，它不起作用。 希望你不要對德國的評論感到惱火。

我不知道它為什么不工作，我根本沒有錯誤（既不是“通常可見”，也不是控制台），網絡選項卡顯示文件upload.php似乎已加載...有沒有人有想法為什么它不起作用？

Answer 1

好的，問題解決了...這不是關於代碼，我的服務器上的我的www-data用戶不是“uploads”文件夾的所有者，因此無權上傳..

任何改進的提示仍然歡迎！

文件上傳（拖放）無效

問題描述

1 個解決方案

解決方案1
0 2016-04-07 09:51:10

文件上傳（拖放）無效

問題描述

1 個解決方案

解決方案1 0 2016-04-07 09:51:10

解決方案1
0 2016-04-07 09:51:10