Question

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

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

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

这样做

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

写一个像这样的函数

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

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

Answer 2

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...
}

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

2 个答案: