Dropzone.js with onetime submit button

问题:

Implementing Dropzone.js and would like to have a onetime submit after all photos are added to the dropzone. This is running with PHP kohana inside a wamp server right now. For some reason I am unable to pass the photos to the php page.

Dropzone config on js

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

Form

 <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 Kohana

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

}

The problem is that $_Files is always empty. Can anyone provide some assistance on configuring this?

回答1:

Press F12 and see the network tab (preview) and click upload.php file u can see like this

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

回答2:

use something like this to check if $_FILE is set

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

回答3:

The files array will always be empty when you click the submit button. Dropzone already submits the files via Ajax so to see the result of print_r($_FILES); you would need to view the result via the network panel using chrome dev tools (or another like it).

To see what you submitted, just set the action url for your form to your desired function, and add print_r($_FILES); somewhere in that function, open up dev tools in chrome, then add a file in dropzone, and follow the steps in Steve Bals's answer to see your result.