php - Dropzone JS 表单数据未发布到数据库

Question

我在一个带有几个字段的小表单中使用了 dropzone js。我想将图像和表单数据一次性提交到数据库。日志中看不到任何错误，正在互联网上搜索解决方案。我是 PHP 的新手，因此非常感谢您的帮助。

表格

<form action="index.php" method="POST" class="form-horizontal" role="form">
        <div class="form-group"></div>

        <label for="name">Name :</label>
        <input type="text" name="name" id="input-title" class="form-control">

        <br><br>

        <label for="description">Email:</label>
        <input type="text" name="description" id="input-description" class="form-control">
        <br><br>
        <label for="File">File: </label>
        <br><br>

        <div class="dropzone dropzone-previews" name="File" id="my-awesome-dropzone"></div>

        <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>

    </form>

PHP 查询

        <?php
if( isset($_POST['submit']) && isset($_POST['name']) && isset($_POST['email']) && !empty($_FILES)){

  $dbHost = 'localhost';
  $dbUsername = 'root';
  $dbPassword = '';
  $dbName = 'mystore';
  //connect with the database
  $conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
  if($mysqli->connect_errno){

    echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
  }


  $name = $_POST['name'];
  $email = $_POST['email'];

  $targetDir = "upload/";
  $fileName = $_FILES['file']['name'];
  $targetFile = $targetDir.$fileName;
  if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
    //insert file information into db table
    $conn->query("INSERT INTO products (product_name,details,category, date_added) VALUES('".$name."','".$email."','".$fileName."','".date("Y-m-d H:i:s")."')");
  }

}
else{

$error = "Fill All Details First !!";

if ( isset($_POST['submit']) && isset($error)) {  echo $error;  }

}
?>

Dropzone JS

<script type="text/javascript">
        Dropzone.autoDiscover = false;
        jQuery(document).ready(function() {

            $("div#my-awesome-dropzone").dropzone({
                url: "/file/post"
            });

        });
    </script>

Answer 1

你必须使用这样的东西

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#my-awesome-dropzone", {
    maxFiles: <?php echo $upload_file_number; ?>,
    url: "remote/upload-file.php",
    addRemoveLinks: true,
    autoProcessQueue: false,
    init: function() {
        this.on("maxfilesexceeded", function(file){
            //handle error for max file size
        });
        var submitButton = document.querySelector("#submit-button");
        var id_import_xls;
        var myDropzone = this;
        submitButton.addEventListener("click", function(e){
            /*  HERE PUT THE AJAX FOR SUBMIT FORM AFTER SUBMIT UPLOAD THE FILE   */
            if (myDropzone.getUploadingFiles().length === 0 && myDropzone.getQueuedFiles().length === 0) {
                //handle the error for no file selected if needed
            }else{
                //with this start upload
                myDropzone.processQueue();

            };
        });//fine addEventListener
        this.on("error", function(file, response) {
            //handle the error
        });
        this.on("complete", function (file, response) {
            //here can handle the success of upload
        });
    },
    success: function(file, response){
        //here can handle the success of upload
    },
});