带有一次性提交按钮的 Dropzone.js答案

【问题标题】：Dropzone.js with onetime submit button带有一次性提交按钮的 Dropzone.js
【发布时间】：2014-01-13 18:29:03
【问题描述】：

实现 Dropzone.js 并希望在所有照片都添加到 dropzone 后进行一次性提交。这现在在 wamp 服务器内使用 PHP kohana 运行。由于某种原因，我无法将照片传递到 php 页面。

js 上的 Dropzone 配置

$(document).ready(function() {

   Dropzone.options.dropzoneForm = {
            // The camelized version of the ID of the form element

            paramName: "files",
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            previewsContainer: ".dropzone-previews",
            clickable: true,
            dictDefaultMessage: 'Add files to upload by clicking or droppng them here.',
            addRemoveLinks: true,
            acceptedFiles: '.jpg,.pdf,.png,.bmp',
            dictInvalidFileType: 'This file type is not supported.',

            // The setting up of the dropzone
            init: function () {
                var myDropzone = this;

                $("button[type=submit]").bind("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    // If the user has selected at least one file, AJAX them over.
                    if (myDropzone.files.length !== 0) {
                        myDropzone.processQueue();
                    // Else just submit the form and move on.
                    } else {
                        $('#dropzone-form').submit();
                    }
                });

                this.on("successmultiple", function (files, response) {
                    // After successfully sending the files, submit the form and move on.
                    $('#dropzone-form').submit();
                });
            }
        }
   });

表格

 <div id="photoContainer">

        <form action="/inspections/uploadphotos" method="post" 
        enctype="multipart/form-data" class="dropzone dz-clickable dropzone-previews" id="dropzone-form">

        </form>
           <button type="submit" id="dz" name="dz" value="Submit " /> Submit Photos</button>
    </div>

PHP 小花

    if (!empty($_FILES)) {
    print_r($_FILES);

}

问题是 $_Files 总是空的。任何人都可以提供一些有关配置的帮助吗？

【问题讨论】：

是否有任何控制台错误？在浏览器中按 F12 调出控制台。
不，似乎没有任何控制台错误。

标签： javascript php jquery dropzone.js

【解决方案1】：

按 F12 并查看网络选项卡（预览）并单击 upload.php 文件你可以看到这样的

Array( [file] => Array ( [name] => migration_3.jpg [type] => image/jpeg [tmp_name] => D:\xampp\tmp\phpA76F.tmp [error] => 0 [size] => 214924 ))

【讨论】：

【解决方案2】：

使用类似的方法来检查是否设置了 $_FILE

如果 (file_exists($_FILES['file']['tmp_name']) || is_uploaded_file($_FILES['file']['tmp_name']))

【讨论】：

【解决方案3】：

当您单击提交按钮时，文件数组将始终为空。 Dropzone 已经通过 Ajax 提交了文件，因此要查看 print_r($_FILES); 的结果，您需要使用 chrome 开发工具（或其他类似工具）通过网络面板查看结果。

要查看您提交的内容，只需将表单的操作 url 设置为所需的函数，并在该函数的某处添加 print_r($_FILES);，在 chrome 中打开开发工具，然后在 dropzone 中添加一个文件，然后按照步骤操作在 Steve Bals's回答看你的结果。

【讨论】：