javascript - DropzoneJS 作为 PHP 表单的一部分

Question

我有这个简化的情况:

<form action='process.php' method='post'>

<div class="dropzone no-margin">
    <div class="fallback">
        <input name="file" type="file" multiple/>
    </div>
</div>

</form>

$(".dropzone").dropzone({ 
url: "/test2.php",
maxFilesize: 2,
maxFiles: 5
});

test2.php 工作得很好，它会立即上传放置在 dropzone 上的文件。但是，问题是，我需要将上传文件的文件名作为隐藏文本输入传递到表单。

这里的test2.php看起来像:

<?php
$target_dir = "user/product/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["file"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["file"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
?>

我是 javascript 或 jquery 世界的初学者。因此，我真的需要您的帮助来告诉我如何将文件名作为隐藏文本输入传递到表单，以便稍后将其写入数据库。

非常感谢您，非常感谢您的帮助。

Answer 1

试试这个:

Dropzone中有一个方法，即sending，用于在发送文件之前发送数据。如果上传多个文件，则使用sendingmultiple方法。

$(".dropzone").dropzone({ 
   url: "/test2.php",
   maxFilesize: 2,
   maxFiles: 5,
   sending:function (data, xhr, formdata) {
      console.log("data :",data);
      //here you can get file name from data variable.you can add that to your form by following line.
      formdata.append('hidden field name', 'file name');
      //you can add as much parameter you want to pass to your post data by formdata.append() function. That will add data to your form data.you can refer that value by using $_POST['hidden_field_name'] at PHP side.
    }
});

请查看以下链接了解详细信息:

http://www.dropzonejs.com/#events