Dropzone не определен

Question

Я совершенно новый на JavaScript, и это сводит меня с ума.

Я хочу использовать Dropzone.js, так что я скачал файл dropzone.js из here и включил его на мой взгляд, как это:

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

Затем я создал форму так:

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

И он отлично работает. Он указывает на функцию php и обрабатывает загрузку на сервере.

Проблема в том, когда я хочу получить доступ к объекту dropzone в JS для его настройки. Когда я

// "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 
}; 

или лучше (работает быстрее, чем выше код):

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