Dropzone无法上传文件并将其移动到文件夹中

Question

Hi I'm new to jquery and dropzone library, I unable to upload files using dropzone. I wanted to do multiple file upload using dropzone whenever I drag and drop multiple image or doc inside dropzone and click submit, I have edit and change all my code and it still not working.. I unable to move or upload the files into the folder. Any help and suggestion please. I use here as reference https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone.

Javascript

var unique = 'ufiles';
Dropzone.options.myAwesomeDropzone = {
    url: "../../scripts/submission-upload.php",
    autoProcessQueue: false,
    autoDiscover: false,
    uploadMultiple: true,
    parallelUploads: 100,
    paramName: unique,
    previewsContainer: ".dropzone-previews",
    maxFilesize: 50, //MB
    maxFiles: 100,
    acceptedFiles: "image/*, application/pdf, .doc, .docx",
    addRemoveLinks: true,
    dictRemoveFile: 'Remove',
    dictFileTooBig: 'File is bigger than 50MB',
    accept: function(file, done) {
        console.log("uploaded");
        done();
    },
    error: function(file, msg){
        alert(msg);
    },
    init: function () {
        var myDropzone = this;

        // First change the button to actually tell Dropzone to process the queue.

        $('input[type=submit]').on("click", function(e){
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
            //$("#upload-forms").submit();
        });
        // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
        // of the sending event because uploadMultiple is set to true.
        this.on("sendingmultiple", function() {
            // Gets triggered when the form is actually being sent.
            // Hide the success button or the complete form.
            $("#upload-forms").submit();
        });
        this.on("successmultiple", function(files, response) {
            // Gets triggered when the files have successfully been sent.
            // Redirect user or notify of success.
        });
        this.on("errormultiple", function(files, response) {
            // Gets triggered when there was an error sending the files.
            // Maybe show form again, and notify user of error
        });
    }
}

Upload PHP

$uploaddir = '../submissions/';
$uploadfile = $uploaddir.$_FILES['ufiles']['name'];
foreach ($FILE['ufiles']['tmp_name'] as $file) {
  echo $file;
  if (move_uploaded_file($_FILES['ufiles']['tmp_name'], $uploadfile)) {
    echo "File is valid, and was successfully uploaded.
";
  } else {
    echo "Error!
";
  }
}

HTML

<form method="post" action="scripts/submission-upload.php" id="upload-forms" enctype="multipart/form-data">
  <div class="dropzone dropzone-previews" id="my-awesome-dropzone">
    <div class="fallback">
      <input name="file[]" type="file" multiple>
    </div>
  </div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

Answer 1

The submit button inside form tag trigger two events i.e, its default form submission and your function. You need to perform you function before default form submission. Instead of doing this

$('#submit').submit(function(){
     dropzone.processQueue();
});

Do this

<form onsubmit="return someFunction();" ...>

And write a function like this

function someFunction(){
    dropzone.processQueue();
    return false;
}

I found a similar solution here also Javascript shortcuts for loops, conditions and return functions