文件上传（拖放）无效

Question

I tried to implement a drag and drop functionality to my site to upload files to the server. 我试图在我的网站上实现拖放功能，以便将文件上传到服务器。 But it's not working, this is the code I used: 但它不起作用，这是我使用的代码：

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

I followed a tutorial to do this, but as said, it's not working. 我按照教程来做这个，但正如所说，它不起作用。 Hope you are not to irritated of the german comments. 希望你不要对德国的评论感到恼火。

I have no idea why it's not working, I get no errors at all (neither "normally visible", nor in console) and the network tabs shows me that the file upload.php seems to be loaded... Does anybody have an idea why it's not working? 我不知道它为什么不工作，我根本没有错误（既不是“通常可见”，也不是控制台），网络选项卡显示文件upload.php似乎已加载...有没有人有想法为什么它不起作用？

Answer 1

Okay, problem solved... It wasn't about the code, my www-data user on my Server wasn't owner of the "uploads" folder, so had no permission to upload.. 好的，问题解决了...这不是关于代码，我的服务器上的我的www-data用户不是“uploads”文件夹的所有者，因此无权上传..

Any tips to improve are still welcome! 任何改进的提示仍然欢迎！

文件上传（拖放）无效

问题描述

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