Enyo的教程非常棒。

我发现教程中的示例脚本对于嵌入在dropzone中的按钮(即表单元素)工作得很好。如果你希望有窗体元素之外的按钮，我能够完成它使用一个点击事件:

首先，HTML:

<form id="my-awesome-dropzone" action="/upload" class="dropzone">  
    <div class="dropzone-previews"></div>
    <div class="fallback"> <!-- this is the fallback if JS isn't working -->
        <input name="file" type="file" multiple />
    </div>

</form>
<button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button>

然后，脚本标记....

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

    // The configuration we've talked about above
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 25,
    maxFiles: 25,

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

        // Here's the change from enyo's tutorial...

        $("#submit-all").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        }); 
    }
}

我想在这里提供一个答案，因为我也面临着同样的问题-我们希望$_FILES元素作为另一个表单的一部分可用。我的答案是基于@mrtnmgs，但注意到这个问题的评论。

首先:Dropzone通过ajax发布数据

因为你使用了formData。附加选项仍然意味着你必须处理用户体验操作——也就是说，这一切都发生在幕后，而不是一个典型的表单post。数据被发送到url参数。

其次:如果您因此想要模拟表单发布，则需要存储发布的数据

这需要服务器端代码将你的$_POST或$_FILES存储在一个会话中，该会话可用于用户在另一个页面加载，因为用户不会转到收到发布数据的页面。

第三:您需要将用户重定向到处理该数据的页面

现在你已经发布了你的数据，存储在一个会话中，你需要在一个额外的页面中为用户显示/操作它。您还需要将用户发送到该页面。

举个例子:

[Dropzone code:使用Jquery]

$('#dropArea').dropzone({
    url:        base_url+'admin/saveProject',
    maxFiles:   1,
    uploadMultiple: false,
    autoProcessQueue:false,
    addRemoveLinks: true,
    init:       function(){
        dzClosure = this;

        $('#projectActionBtn').on('click',function(e) {
            dzClosure.processQueue(); /* My button isn't a submit */
        });

        // My project only has 1 file hence not sendingmultiple
        dzClosure.on('sending', function(data, xhr, formData) {
            $('#add_user input[type="text"],#add_user textarea').each(function(){
                formData.append($(this).attr('name'),$(this).val());
            })
        });

        dzClosure.on('complete',function(){
            window.location.href = base_url+'admin/saveProject';
        })
    },
});

这里有另一种方法:在您的表单中添加一个div，类名为dropzone，并以编程方式实现dropzone。

HTML:

<div id="dZUpload" class="dropzone">
      <div class="dz-default dz-message"></div>
</div>

JQuery:

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    $("#dZUpload").dropzone({
        url: "hn_SimpeFileUploader.ashx",
        addRemoveLinks: true,
        success: function (file, response) {
            var imgName = response;
            file.previewElement.classList.add("dz-success");
            console.log("Successfully uploaded :" + imgName);
        },
        error: function (file, response) {
            file.previewElement.classList.add("dz-error");
        }
    });
});

注意:禁用自动发现，否则Dropzone将尝试附加两次

为了在一个请求中提交所有文件和其他表单数据，您可以将Dropzone.js临时隐藏输入节点复制到您的表单中。你可以在adddedfiles事件处理程序中做到这一点:

var myDropzone = new Dropzone("myDivSelector", { url: "#", autoProcessQueue: false });
myDropzone.on("addedfiles", () => {
  // Input node with selected files. It will be removed from document shortly in order to
  // give user ability to choose another set of files.
  var usedInput = myDropzone.hiddenFileInput;
  // Append it to form after stack become empty, because if you append it earlier
  // it will be removed from its parent node by Dropzone.js.
  setTimeout(() => {
    // myForm - is form node that you want to submit.
    myForm.appendChild(usedInput);
    // Set some unique name in order to submit data.
    usedInput.name = "foo";
  }, 0);
});

显然，这是一种依赖于实现细节的变通方法。相关源代码。

这只是如何在现有表单中使用Dropzone.js的另一个例子。

dropzone.js:

 init: function() {

   this.on("success", function(file, responseText) {
     //alert("HELLO ?" + responseText); 
     mylittlefix(responseText);
   });

   return noop;
 },

然后，在之后的文件里

function mylittlefix(responseText) {
  $('#botofform').append('<input type="hidden" name="files[]" value="'+ responseText +'">');
}

这里假设你有一个id为#botofform的div，这样在上传时你就可以使用上传文件的名称。

注意:我的上传脚本返回theuploadedfilename.jpeg Dubblenote你还需要做一个清理脚本，检查上传目录的文件不使用，并删除他们。如果在前端未验证的形式:)

你可以通过捕捉dropzone中的'sending'事件来修改formData。

dropZone.on('sending', function(data, xhr, formData){
        formData.append('fieldname', 'value');
});