Dropzone和其他html表单输入

Question

我想通过dropzone将html表单输入和图像组合在一起，以便我可以将它们存储在我的数据库中。我尝试使用后备功能（没有dropzone）everythig工作正常;当我单击启用了dropzone的提交按钮时，文本字段将保存到数据库，但文件（图像）不会保存。

HTML

<link href="css/dropzone.css" type="text/css" rel="stylesheet" />
    <form   action="submit_vehicle.php" enctype="multipart/form-data" enter code heremethod="post">
        <input type="text" id ="Product" name ="Product" />
        <input type="text" id ="p_model" name ="p_model" />
        <div class="dropzone" id="myDropzone" name="mainFileUploader">
            <div class="fallback">
                <input name="files[]" type="file" multiple />
                <div class = "dropzone-preview"></div>
            </div>
        </div>
    <div>
        <button type="submit" id="submit-all" style= "display: none"> upload </button>
    </div>
        </form>

JS

Dropzone.options.myDropzone = {
            url: 'submit_vehicle.php',
            paramName:'files',
            autoProcessQueue: false,
            uploadMultiple: false,
            parallelUploads: 100,
            maxFiles: 100,
            acceptedFiles: "image/*",

        init: function () {

            var submitButton = document.querySelector("#submit-all");
            var myDrop = this;

            submitButton.addEventListener("click", function () {
                myDrop.processQueue();
            });

            this.on("addedfile", function (files) {

                // Create the remove button
                var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>");
                document.getElementById("submit-all").style.display = "block";
                // Listen to the click event
                removeButton.addEventListener("click", function (e) {
                    // Make sure the button click doesn't submit the form:
                    e.preventDefault();
                    e.stopPropagation();
                    // Remove the file preview.
                    myDrop.removeFile(files);

                });
            });

            this.on('sendingmultiple', function (data, xhr, formData) {
                formData.append("Product", $("#Product").val());
                formData.append("p_model", $("#p_model").val());
            });
        }
    };

，最后是PHP

$Product = $_POST['Product'];
$p_model = $_POST['p_model'];
$images=array();
$path = 'upload_test/';
$errors = array();
if (!empty($_FILES)) {
    foreach ($_FILES['files[]']['tmp_name']as $key => $tmp_name) {
        $file_name = $key . $_FILES['files[]']['name'][$key];
        $file_tmp = $_FILES['files']['tmp_name'][$key];

     move_uploaded_file($file_tmp, $path.$file_name);  
     $images[] = $file_name;


    }
    $imagestring =  base64_encode(serialize($images));
    $sql = "INSERT INTO test(Product, p_model, filename)VALUES('$Product', '$p_model','$imagestring')";
    $insert_details = mysqli_query($con, $sql);

    if ($insert_details) {
        echo "success!!";
        echo base64_decode($imagestring)."<br>";
        print_r(array_values($images));//prints the values of an array 
        $keys = array_keys($images); 
        $imagename = $images[2]; //prints the second value of an array not good though
        echo "<img src = 'upload_test/Camera_20000102_075707.jpg' height = 50 width = 100>";
        //echo array_column($images,1);
        echo current($images);
        header('');
        exit();
        }else{  
        header('Location: vehicle.php');    
        }
    }
    else if(($Product)&&($p_model)){
                    $sql = "INSERT INTO test(Product, p_model)VALUES('$Product', '$p_model')";
                    $insert_details1 = mysqli_query($con, $sql);
                    if($insert_details1){echo "other info inserted but no files to add";
                    }
    }else{
        echo "empty form";
    }