Dropzone 使用序列化将所有内容上传到一个数组中

Question

问题是每次我点击上传按钮将所有图像保存到数据库中时，它都会一张一张地保存。例如：我在 dropzone 上上传了两张图片并提交了。将保存在数据库中的数据是两列，这是错误的，我想显示的只是一列多张图片。希望你能帮我解决这些问题。先谢谢了！

Dropzone js代码：

Dropzone.options.myDropzone = {

  // Prevents Dropzone from uploading dropped files immediately
  autoProcessQueue: false,

  init: function() {
    var submitButton = document.querySelector("#submit-all")
        myDropzone = this; // closure

    submitButton.addEventListener("click", function() {
      myDropzone.processQueue(); // Tell Dropzone to process all queued files.
    });

    // You might want to show the submit button only when 
    // files are dropped here:
    this.on("addedfile", function() {
      // Show submit button here and/or inform user to click it.
    });

  }
};

HTML:

<button id="submit-all">Submit all files</button>
<form action="upload.php" class="dropzone" id="my-dropzone"></form>

我的php代码：

<?php
if(!empty($_FILES)){

        $targetDir = "../drop/../images/";
        $fileName = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
        $img = $_FILES['file']['name'];
        $img_name = $id . "_" . uniqid() . "_" . ($_POST['default_pic'] == $img ? "1" : "0") . "." . $fileName;
        $targetFile = $targetDir.basename($img_name);

        if (move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){

            $new_data = array("cover" => ($_POST['default_pic'] == $img ? "1" : "0"), "img" => $img_name); 
            $new_array[] = $new_data;

            $data_serialize = serialize($new_array);
            //insert file information into db table
            $mysqli->query("INSERT INTO files (file_name, uploaded) VALUES('".$data_serialize."','".date("Y-m-d H:i:s")."')");
            //$new_id = $mysqli->insert_id;
    }

}
?>

Answer 1

这是因为 dropzone 默认情况下单独上传文件，在单独的请求中单独发送每个文件，使用 dropzone 选项一次上传所有排队的文件：

uploadMultiple: true

这样文件将作为一个数组一起上传。

示例：

Dropzone.options.myDropzone = {
    autoProcessQueue: false,
    uploadMultiple: true,
    init: function () {
        var submitButton = document.querySelector("#submit-all");
        myDropzone = this; 
        submitButton.addEventListener("click", function () {
            myDropzone.processQueue(); 
        });
        this.on("success", function(file){
            console.log(file.xhr.response);
        });
    }
};

一旦在服务器端你没有正确处理 $_FILES 变量，我不打算在这里解释 $_FILES 是如何工作的，但这里有一些有趣的链接：1, 2 .

由于 `$_FILES 是一个结构不直观的多维数组，您需要多次循环遍历它，才能完成您想要做的事情。

这里是服务器端的一个例子，我只是硬编码了一些值，因为我真的不知道它们必须是什么。另外打印的信息只是在浏览器控制台看到的过程：

<?php
    if(!empty($_FILES)){
        // Harcoded values
        $id=99;
        $_POST["default_pic"] = $_FILES["file"]["name"][0];

        print("ORIGINAL STRUCTURE OF $_FILES:\n");
        print_r($_FILES);
        $myfiles = array();
        foreach(array_keys($_FILES["file"]['name']) as $i) { // loop over 0,1,2,3 etc...
            foreach(array_keys($_FILES["file"]) as $j) { // loop over 'name', 'size', 'error', etc...
                $myfiles[$i][$j] = $_FILES["file"][$j][$i]; // "swap" keys and copy over original array values
            }
        }
        print("RESULT STRUCTURE OF THE MANIPULATED $_FILES:\n");
        print_r($myfiles);
        $targetDir = "../drop/../images/";
        $myimages = array();

        foreach($myfiles as $single_image) {
            $extension = pathinfo($single_image["name"], PATHINFO_EXTENSION);
            $img = $single_image["name"];
            $img_name = $id . "_" . uniqid() . "_" . ($_POST['default_pic'] == $img ? "1" : "0") . "." . $extension;
            $targetFile = $targetDir.basename($img_name);
            if (move_uploaded_file($single_image["tmp_name"], $targetFile)){
                $myimages[] = array("cover" => ($_POST['default_pic'] == $img ? "1" : "0"), "img" => $img_name);
            }
        }
        $data_serialize = serialize($myimages);
        print("SERIALIZED DATA:\n");
        print($data_serialize);
    }

Dropzone 使用序列化将所有内容上传到一个数组中

Dropzone upload all in one array using serialize

php

dropzone.js