Dropzone.js并删除按钮

时间:2014-04-10 16:42:23

标签: dropzone.js

我很乐意使用dropzone.js来实现文件上传功能。我创建这样的表单:

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

<script>
  // myDropzone is the configuration for the element that has an id attribute
  // with the value my-dropzone (or myDropzone)
  Dropzone.options.myDropzone = {
    init: function() {
      this.on("addedfile", function(file) {

        // Create the remove button
        var removeButton = Dropzone.createElement("<button>Remove file</button>");


        // Capture the Dropzone instance as closure.
        var _this = this;

        // Listen to the click event
        removeButton.addEventListener("click", function(e) {
          // Make sure the button click doesn't submit the form:
          e.preventDefault();
          e.stopPropagation();

          // Remove the file preview.
          _this.removeFile(file);
          // If you want to the delete the file on the server as well,
          // you can do the AJAX request here.
        });

        // Add the button to the file preview element.
        file.previewElement.appendChild(removeButton);
      });
    }
  };
</script>

我在html文件头中添加了dropzone.js文件。但是,当我在框中拖动文件时,我收到以下错误:

Uncaught ReferenceError: Dropzone is not defined

请任何帮助。

1 个答案:

答案 0 :(得分:4)

你使用非常简单的代码 例如

myDropzone.on("addedfile", function(file) {
  file.previewElement.addEventListener("click", function() { myDropzone.removeFile(file); });
});