Dropzone 删除上一张图片答案

【问题标题】：Dropzone remove previous imageDropzone 删除上一张图片
【发布时间】：2014-07-11 13:42:26
【问题描述】：

我需要帮助来回答上一个问题 How to limit the number of dropzone.js files uploaded?

有解决方案的地方

Dropzone.options.myAwesomeDropzone = {
  accept: function(file, done) {
    console.log("uploaded");
    done();
  },
  init: function() {
    this.on("addedfile", function() {
      if (this.files[1]!=null){
        this.removeFile(this.files[0]);
      }
    });
  }
};

但是作为一个 js 笨蛋，我不知道该放在哪里。我假设我的表单必须有 id myAwesomeDropzone 并且上面的代码需要插入到 dropzone.js 文档中，但是在哪里呢？如果您可以提供“之后”和“之前”或替换答案。

如果有人能给我一些指导，那就太好了。

我的声望低于 50，所以我无法对原帖发表评论。如果我将此作为新帖子发布是错误的，请管理员不要只是责备我并关闭它，而是移动它或做任何事情以允许人们提供相应的帮助。

干杯安迪

【问题讨论】：

标签： javascript

【解决方案1】：

您的 html 表单应如下所示。请注意，

class="dropzone"

和

id="my-dropzone"

“my-dropzone”ID 很重要，DropZone 将其视为“myDropzone”，（连字符已删除并采用驼峰形式）。所以当你在 DropZone.options 中引用这个 id 时，它应该是“myDropzone”。这很重要。

<div>
    <form action="/file-upload" class="dropzone" id="my-dropzone" style="border:2px dotted #337ab7">
      <div class="dz-message">
        Drag n drop photos here or click to upload.
        <br />
        <span class="note">(The photos are uploaded to twitter only when the tweet is sent.)</span>
      </div>
    </form>
</div>

你应该像这样在你的html页面中链接css和js文件

<script src="./js/dropzone.min.js"></script>
<link href="./css/dropzone.min.css" rel="stylesheet" type="text/css">

在页面加载时，您应该在您的页面的 JS 代码中初始化 dropzone 配置，如下所示。我将 dropzone 限制为仅接受一个文件，并且其大小不应超过 5MB。

self.options.maxFilesize = 5; self.options.maxFiles = 1;

Dropzone.autoDiscover = false;
Dropzone.options.myDropzone = {
  init: function() {
    var self = this;
    // config
    self.options.addRemoveLinks = true;
    self.options.autoProcessQueue = false;
    self.options.maxFilesize = 5;
    self.options.maxFiles = 1;
    self.options.dictFileTooBig =
      "Twitter do not allow files greater than 5MB.";
    //New file added
    self.on("addedfile", function(file) {
      console.log('new file added ', file.path);
    });
    self.on("maxfilesexceeded", function(file) {
      alert(
        "Only one photo can be attached with the tweet."
      );
    });

  }
};

现在，当您的页面加载时，您将看到表单并在您的 div 中获得拖放功能。

要访问文件，您可以在 javascript 中对某些按钮单击事件执行如下操作。

// to get queued files
var myDropzone = Dropzone.forElement("#my-dropzone");
var files = myDropzone.getQueuedFiles();

【讨论】：