Dropzone 已附加 - JavaScript

Dropzone 是一个开源的 JavaScript 库，用于实现文件上传，具有可配置性强、易于扩展、可供自定义文件预览和操作等特点。以下是 Dropzone 库的介绍与用法。

初始化

使用 Dropzone 需要初始化一个 Dropzone 实例：

new Dropzone("#my-dropzone");

其中 #my-dropzone 是一个 HTML 元素的选择器，该元素将成为 Dropzone 的目标容器，在此容器内拖放文件以上传。可以使用以下选项来创建 Dropzone 实例：

new Dropzone("#my-dropzone", {
  url: "/upload",
  method: "post",
  timeout: 180000,
  maxFiles: 10,
  maxFilesize: 1024,
  acceptedFiles: ".jpg,.png,.gif",
  parallelUploads: 2,
  addRemoveLinks: true,
  thumbnailWidth: 120,
  thumbnailHeight: 120,
  dictDefaultMessage: "拖放文件到此处上传",
  dictFallbackMessage: "您的浏览器不支持拖放文件上传",
  dictInvalidFileType: "不支持上传该文件类型",
});

以上示例展示了 Dropzone 的一些选项，具体请查看 官方文档。

需要注意的是，Dropzone 的实例只能初始化一次，如果需要更改实例的选项，可以调用实例的 destroy 方法移除以前的实例，再重新初始化实例。

事件

Dropzone 具有丰富的事件以处理上传过程中的各类情况。以下是一些常用的事件：

初始化事件

new Dropzone("#my-dropzone", {
  init: function() {
    this.on("init", function() {
      console.log("Dropzone 初始化完毕");
    });
  },
});

文件添加事件

new Dropzone("#my-dropzone", {
  init: function() {
    this.on("addedfile", function(file) {
      console.log(file.name + " 已加入上传队列");
    });
  },
});

文件上传事件

new Dropzone("#my-dropzone", {
  init: function() {
    this.on("uploadprogress", function(file, progress) {
      console.log(file.name + " 上传进度：" + progress + "%");
    });
  },
});

上传成功事件

new Dropzone("#my-dropzone", {
  init: function() {
    this.on("success", function(file, responseText) {
      console.log(file.name + " 上传成功：" + responseText);
    });
  },
});

错误事件

new Dropzone("#my-dropzone", {
  init: function() {
    this.on("error", function(file, errorMessage) {
      console.log(file.name + " 上传失败：" + errorMessage);
    });
  },
});

方法

以下是一些常用的 Dropzone 方法：

获取上传队列中的文件

var files = myDropzone.getQueuedFiles();

获取上传成功的文件

var files = myDropzone.getAcceptedFiles();

移除文件

myDropzone.removeFile(file);

方法的所有用法，请参照 官方文档。

结语

以上是 Dropzone 的介绍与用法，Dropzone 具有简单易用、配置灵活、扩展性强等优点，是一个实用的文件上传库。