拖放区未定义

Question

我在 JavaScript 还很陌生，这让我发疯。

我想使用 Dropzone.js 所以我从 here 下载了文件 dropzone.js 并将其包含在我的视图中，如下所示：

<script src="<?php echo JS_DIRECTORY; ?>/dropzone.js"></script>

然后我创建了这样的表格：

<form action="http://localhost/project/uploadTest/upload" class="dropzone">
</form>

而且效果很好。它指向 php 函数，我处理服务器站点上的上传。

问题是当我想访问JS中的dropzone对象来配置它时。当我做

// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don't.");
    }
    else { done(); }
  }
};

我明白了

Uncaught ReferenceError: Dropzone is not defined

任何帮助将不胜感激，谢谢

Answer 1

您的代码可能运行太快了。将其包裹在：

window.onload = function() {
    // access Dropzone here
};

或者，更好（运行s 比上面的代码快）：

document.addEventListener("DOMContentLoaded", function() {
    // access Dropzone here
});

或者，如果您使用 jQuery：

$(function() {
    // access Dropzone here
});

Answer 2

关注这个：

您的 HTML 文件：

<form action="your url" class="dropzone" id="dropzone-form">
</form>

你的 JS 文件：

window.onload = function() {
    // dropzoneFormis the configuration for the element that has an id attribute
    // with the value dropzone-form (or dropzoneForm)
    //initialize the dropzone;
    Dropzone.options.dropzoneForm = {
            autoProcessQueue: 'your value',
            acceptedFiles: 'your value',
            maxFilesize: 'your value',
            ....and so on.
            init: function() {
               myDropzone = this;

               this.on('addedfile', function(file) {
                   //todo...something...
               }
               //catch other events here...
            }
    };
};

拖放区未定义

Dropzone is not defined

javascript

jquery

dropzone.js