Dropzone使用serialize上传所有数组 - Dropzone upload all in one array using serialize

问题是每次我点击上传按钮将所有图像保存在数据库中时，它都会逐一保存。例如：我在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;
    }
}
?>

这是因为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);
    }