在HTML5中拖放多个文件？

Question

I've already a system which uploads multiple files (HTML,JS,PHP).

For now, I have a input multiple. But I would like to use Drag & Drop without changes the system PHP using $_FILES["uploadfile"] Is it possible ?

HTML

<input type="file" name="uploadfile[]" multiple="" style="position: absolute; margin: -5px 0px 0px -175px; padding: 0px; width: 220px; height: 30px; font-size: 14px; opacity: 0; cursor: pointer; display: none; z-index: 2147483583; top: 83px; left: 333px;">

<div id="dropzone" style="border: 3px solid #DDD; width: 400px; height: 400px;"></div>

PHP

$uploaddir = 'uploads/';

$files = array();
foreach ($_FILES["uploadfile"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $path = $uploaddir . basename($_FILES['uploadfile']['name'][$key]);
        if (move_uploaded_file($_FILES['uploadfile']['tmp_name'][$key], $path)) {
            $files [] = array (
                'title' => $_FILES['uploadfile']['name'][$key],
                'url' => $path,
                'size' => $_FILES['uploadfile']['size'][$key]
            );
        }
    }
}

echo json_encode($files);

Answer 1

Take a look here, the frond end side is very simple to understand and can be adapt easily with your script

Source Code to implement

Demo to view