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

Question

您好，我是 jquery 和 dropzone 库的新手， 我无法使用 dropzone 上传文件。每当我将多个图像或文档拖放到 dropzone 中并单击提交时，我都想使用 dropzone 进行多个文件上传，我已经编辑并更改了所有代码，但它仍然无法正常工作。我无法将文件移动或上传到文件夹中. 请提供任何帮助和建议。我在这里作为参考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
        });
    }
}

上传 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.\n";
  } else {
    echo "Error!\n";
  }
}

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

Dropzone name 参数默认设置为 file。如果你想改变它，你可以用paramName改变它。

因此，在您的 PHP 中，您将尝试使用 $_FILES['file'] 而不是 id 来获取文件数组。

由于您将上传多个文件并且uploadMultiple 设置为true，因此您需要遍历$_FILES['file'] 数组。看看这个：

$uploaddir = '../submissions/';

foreach($_FILES['file'] as $file){
    $uploadfile = $uploaddir.$file['name'];
    // Move file here etc...
}

Answer 2

表单标签内的提交按钮触发两个事件，即它的默认表单提交和您的函数。您需要在默认表单提交之前执行您的功能。 而不是这样做

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

这样做

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

然后写一个这样的函数

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

我在这里也找到了类似的解决方案Javascript shortcuts for loops, conditions and return functions