使用Dropzone.js上传的示例代码

下面是使用Dropzone.js上传的示例代码的完整攻略：

第一步：引入Dropzone.js插件

首先，你需要下载Dropzone.js，并在HTML文件中引入相关的JS和CSS文件。在你的HTML头部中添加以下代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>

第二步：设置上传表单

在HTML中添加一个表单，标识文件上传：

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

第三步：初始化Dropzone

使用JavaScript代码初始化Dropzone，并添加文件的处理逻辑：

Dropzone.options.myDropzone = {
  paramName: "file",
  maxFilesize: 2,
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("图片太丑了，拒绝上传");
    }
    else { done(); }

  }
};

在上述代码中，我设置了一些选项来控制上传过程的行为。例如，paramName选项设置了文件上传时的表单元素名字，maxFilesize选项设置了上传文件大小的限制等。accept选项用来验证文件类型，只允许上传jpeg、png和gif格式的图片，如果验证失败则不允许上传该文件。

示例1：自定义上传成功的处理逻辑

在成功上传文件之后，可以选择自定义处理上传成功的逻辑，例如可以显示成功消息等。

Dropzone.options.myDropzone = {
  paramName: "file",
  maxFilesize: 2,
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("图片太丑了，拒绝上传");
    }
    else { done(); }

  },
  success: function(file, response) {
    alert("文件 " + file.name + " 上传成功！");
  }
};

在上述代码中，我添加了success选项，用来定义上传成功后的处理逻辑。当上传成功时，该选项中的函数会被执行，显示一个成功消息弹框。

示例2：使用Dropzone事件处理文件上传

使用Dropzone的事件来处理文件的上传。例如，可以添加一个事件，用于在上传成功后将已经上传的文件从列表中删除。

Dropzone.options.myDropzone = {
  paramName: "file",
  maxFilesize: 2,
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("图片太丑了，拒绝上传");
    }
    else { done(); }

  },
  success: function(file, response) {
    alert("文件 " + file.name + " 上传成功！");
  },
  init: function() {
    this.on("success", function(file, response) {
      this.removeFile(file);
    });
  }
};

在上述代码中，我添加了一个init选项，用来初始化上传组件。在该选项中，使用this.on方法来定义一个success事件，该事件会在上传成功后被触发，用来删除已经上传的文件。使用this.removeFile()方法可以将指定的文件从上传列表中删除。