在 Dropzone.js 中处理事件

Question

我有这个简单的 HTML 代码：

<form id="filedrop"
    class="dropzone"
    action="{{ route('store.womenoffer.photo', ['id' => $id]) }}"
    enctype="multipart/form-data"
    method="post">
    {{ csrf_field() }}
</form>

我想添加处理事件。所以我尝试了一些事情：

$(function () {
    var myDropzone = $("#filedrop");
    myDropzone.on("success", function (file) {
        alert('Hello World');
    });
})

还有这个：

Dropzone.options.filedrop = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 2, // MB
    accept: function(file, done) {
        accept: function(){
        alert('Hello World');
    },
    success: function(){
      alert('Hello World 1');
    }
};

所有照片均已正确上传，但活动无效。我的后端代码如下所示：

$name = $this->uploadImg($request->file('file'), 'small');
if($name){
    Photo::create([
        'name'      => $name,
        'user_id'   => Auth::user()->id,
        'women_id'  => $id
    ]);
    return response()->json(['success' => $name]);

Answer 1

TL;DR - Here's a working JSFiddle.

为什么您的代码不起作用？

您的第一次尝试将事件附加到 jQuery 对象，而不是 Dropzone。

// This is a jQuery selector, you'll get your form as the result
var myDropzone = $("#filedrop");

// This attaches a handler for the "success" event - but there is no
// such event on a form.
myDropzone.on("success", function (file) {

您的第二次尝试几乎是正确的，但没有以正确的方式附加处理程序：

// This is the correct way to apply options ...
Dropzone.options.filedrop = {

// ... but this is not how to attach handlers
success: function(){

好的，那怎么解决呢？

The Dropzone.js docs 描述有几种方法可以实例化 Dropzone。最简单的方法是将dropzone 类添加到您的表单中，仅此而已（顺便说一句，您甚至不需要在表单中包含enctype 或method）。这就是你所拥有的，所以让我们坚持这种方法。

接下来，the configuration section of the docs 描述了在这种情况下如何配置选项：

...如果您只有带有 dropzone 类的 HTML 元素，...您必须将配置存储在某个地方，以便 Dropzone 在实例化它们时知道如何配置 dropzone。

这是通过 Dropzone.options 对象完成的。

// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {

所以对于您的表单，应该是：

Dropzone.options.filedrop = { ... }

最后，the events section of the docs 展示了如何附加事件处理程序，并列出事件及其接收的参数。 success 接收文件和服务器响应作为参数。

将它们与您的代码放在一起：

HTML

<form id="filedrop"
    class="dropzone"
    action="{{ route('store.womenoffer.photo', ['id' => $id]) }}">
    {{ csrf_field() }}
</form>

Javascript

Dropzone.options.filedrop = {
    init: function() {
        this.on("success", function(file, response) { 
            alert("Hello World");
        });
    }
};

Here's a working JSFiddle。它将一个文件上传到JSFiddle's /echo/json endpoint，它会模拟一个真实的 POST 到您的后端。文件正常上传，但没有任何反应。