Javascript Dropzone和其他html表单输入

我想通过dropzone组合html表单输入和图像，以便将它们存储在数据库中。我尝试过使用fall back功能（没有dropzone），everythig工作正常；当我在启用dropzone的情况下单击submit按钮时，文本字段会保存到数据库中，但文件（图像）不会

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());
            });
        }
    };

Dropzone.options.myDropzone={
url:“submit_vehicle.php”，
参数名称：'files'，
自动处理队列：false，
uploadMultiple:false，
并行上传：100，
最大文件数：100，
acceptedFiles:“image/*”，
init：函数（）{
var submitButton=document.querySelector（“全部提交”）；
var myDrop=this；
submitButton.addEventListener（“单击”，函数（）{
myDrop.processQueue（）；
});
此.on（“addedfile”，函数（文件）{
//创建删除按钮
var removeButton=Dropzone.createElement（“删除文件”）；
document.getElementById（“全部提交”）.style.display=“块”；
//收听单击事件
removeButton.addEventListener（“单击”），函数（e）{
//确保单击按钮不会提交表单：
e、 预防默认值（）；
e、 停止传播（）；
//删除文件预览。
myDrop.removeFile（文件）；
});
});
this.on（'sendingmultiple'，函数（data、xhr、formData）{
formData.append（“Product”，$（“#Product”）.val（）；
append（“p#u 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";
    }

$Product=$\u POST['Product']；
$p_model=$_POST['p_model']；
$images=array（）；
$path='upload_test/'；
$errors=array（）；
如果（！空（$\u文件））{
foreach（$\u FILES['FILES[]]['tmp\u name']作为$key=>$tmp\u name）{
$file_name=$key.$\u FILES['FILES[]']['name'][$key]；
$file\u tmp=$\u FILES['FILES']['tmp\u name'][$key]；
移动上传的文件（$file\u tmp，$path.$file\u name）；
$images[]=$file\u name；
}
$imagestring=base64_编码（序列化（$images））；
$sql=“插入测试（产品、p_模型、文件名）值（“$Product”、“p_模型”、“$imagestring”）”；
$insert\u details=mysqli\u查询（$con，$sql）；
如果（$插入详细信息）{
呼应“成功！！”；
echo base64_解码（$imagestring）。“
”；
print_r（数组值（$images））；//打印数组的值
$keys=数组_键（$images）；
$imagename=$images[2]；//尽管打印数组的第二个值不好
回声“；
//回波阵列_列（$images，1）；
回波电流（图像）；
标题（“”）；
退出（）；
}否则{
标题（'Location:vehicle.php'）；
}
}
如果（$Product）和（$p_模型））{
$sql=“插入测试（产品、p_模型）值（“$Product”、“p_模型”）”；
$insert\u details1=mysqli\u查询（$con，$sql）；
如果（$insert_details1）{echo“插入了其他信息，但没有要添加的文件”；
}
}否则{
呼应“空形式”；
}

您能否将其降低到再现问题所需的最低代码？您是否尝试发送带有文本的图像？例如，当用户需要发布产品时，他们会在表单中输入产品详细信息，并使用dropzone附加照片，当他们单击“提交”按钮时，所有表单内容都会立即发送。上面的代码发送详细信息，但不发送照片。在我看来，dropzone代码在某种程度上无法将上传的文件发送到php代码。您能否将其减少到再现您遇到的问题所需的最低代码？您是否尝试发送带有文本的图像？例如，当用户需要发布产品时，他们在表单中输入产品详细信息，并随dropzone附上照片，当他们单击submit按钮时，所有表单内容将立即发送。上面的代码发送详细信息，但不发送照片。在我看来，dropzone代码在某种程度上无法将上传的文件发送到php代码。