Dropzone js错误“Uncaught TypeError: $（...）.dropzone不是函数”

Question

我一直在尝试在同一表单中添加其他输入字段和拖放区域，但终于成功了。目前我的问题是，单击或拖动时拖放区域不响应，并在控制台中出现错误“Uncaught TypeError: $（...）.dropzone不是一个函数”。以下是我的代码：

    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/basic.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>


    {!! Form::open([ 'action'=>'MainController@uploadCar', 'files' => true, 'enctype' => 'multipart/form-data']) !!}

    <div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>

     <div class="col-md-6">
     <label class="required">Location</label>
     <input type="text" class="full-col" name="location">
     </div>

     {!! Form::close() !!}

     <script type="text/javascript">

     Dropzone.autoDiscover = false;
     jQuery(document).ready(function() {

      $("div#my-awesome-dropzone").dropzone({
        url: "/uploadcar"
      });

     });


     </script>

非常感谢您的帮助

- Tovo

---

请查看此链接：https://github.com/enyo/dropzone/issues/215 - Durga

Durga，我已经浏览了你提供的链接，但仍然无法解决我的问题。 - Tovo

Answer 1

有点晚了，但希望能对某些人有所帮助。来自Dropzone.js的建议是尝试使用：

// Dropzone class:
var myDropzone = new Dropzone("div#my-awesome-dropzone", { url: "/uploadcar"});

代替：

$("div#my-awesome-dropzone").dropzone({
    url: "/uploadcar"
});

我曾遇到相同问题（在不同情境下），这对我很有效。

- Javy Villalba

Answer 2

当查看下面给定地址上的相关JavaScript文件时，我发现名为“dropzone”的函数以大写字母开头：

https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js

所以，首先确保在使用函数时不存在版本问题。然后，尝试使用以下示例中的相关函数并使用大写字母：

jQuery(document).ready(function() {
    $("div#my-awesome-dropzone").Dropzone({
        url: "/uploadcar"
    });
 });

- Murat Yıldız

Answer 3

尝试在包含Dropzone后调用它，并将其放置在jQuery文档准备好的内部。

$(document).ready(function() {
      $("div").click(function() {
       // call dropzone here
      });
    });

- Ahmed Salah

---

在包含Dropzone之后尝试调用它。 - Quentin

"将其放置在jQuery文档准备好的函数内" - 这并没有帮助。试图使用它的脚本已经出现在加载dropzone函数的脚本之后。 - Quentin