Javascript dropzone仅上载一个文件

我正在使用dropzone.js作为我的拖放文件上传解决方案。我只想上传一个文件，如果我上传第二个文件，第一个应该删除，第二个应该上传。 你知道怎么做吗

这是我的html

<form class="dropzone dz-clickable" action="upload.php" enctype='multipart/form-data'>
  <i class="fa fa-cloud-upload element"></i>
  <div style="color:gray;">Drag and drop or click to upload image</div>
  <input type="hidden" name="filenameEmail" class="filenameEmail" value="">
  <input type="hidden" name="side" value="front">
</form>

---

它只允许上载一个文件，但我无法删除以前上载的文件。请帮助我。提前感谢

maxFiles:1用于告诉dropzone应该只有一个文件。当存在多个文件时，将调用函数，并将超出的文件作为第一个参数

下面是一个删除第一个文件预览并添加新文件的简单函数：）

---

将

maxFiles

限制为1仍然允许在上载对话框中选择多个文件。要禁止在配置中选择多个映像，请指定以下初始化函数：

maxFiles:1,
init: function() {
    this.hiddenFileInput.removeAttribute('multiple');
}  

        this.on("addedfile", function (file) {
            if (this.files.length > 1) {
                this.removeAllFiles()
                this.addFile(file);
            }
        });

---

我通过方法

addFile

使用event

maxfilesExcepended

，并将其转换到事件调用的无限循环中。使用

addFile

应该是个问题，因为我在官方网站或GitHub wiki中都没有看到它。最后，我用

addedfile

事件解决了这个问题。Dropzone.js是我编写时的最新版本（4.3.0）

---

这些解决方案都不适合我

调用

maxfilesexceeded

事件太迟，即在尝试添加文件之后

使用

this.removeFile（this.files[0]）的其他解决方案

导致

“未捕获的TypeError:无法读取null的属性'removeChild'。

或无限循环

由-

maxFiles: 2,
init: function () {

    this.on("addedfile", function (file) {
        if (this.files.length > 1) {
            this.files = this.files.slice(1, 2);                        
        }
    });

}

使用

dz clickable

（文件选择器btn）并拖放时工作

 Dropzone.prototype.defaultOptions.init = function () {

                 this.hiddenFileInput.removeAttribute('multiple');
                 this.on("maxfilesexceeded", function (file) {
                     this.removeAllFiles();
                     this.addFile(file);
                 });
             };

---

这是我的工作。

两种解决方案的组合在init函数中完成了我的工作：

maxFiles:1,
init: function() {
    this.hiddenFileInput.removeAttribute('multiple');
}  

        this.on("addedfile", function (file) {
            if (this.files.length > 1) {
                this.removeAllFiles()
                this.addFile(file);
            }
        });

---

当我拖放第一个文件后，文件的图像预览消失，它是一个灰色预览。它不是完美的，因为它触发了

错误

事件。跟踪错误时出错@darkbaby123适用于最新版本。由于@darkbaby123 answer适用于更一般的情况（拖动文件或选择文件），因此被否决。谢谢！答案@NeoNe也不错，但是当你拖动一个文件时，它仍然会上传两个文件。我试过你的，它是双向的：）这个对我有用@NeoNe触发错误事件。跟踪错误时很糟糕。我尝试过这个，但对我无效。我只有一个输入，我需要添加另一个（隐藏的）输入吗？@AndrewFox你找到了吗？它对我也不起作用。@MilanoSlesarik不幸的是，我仍然有这个问题。请小心，

maxFiles:2

允许多个选择。这是一种糟糕的用户体验，在手机上具有误导性。请参见@darkbaby123答案

        this.on("addedfile", function (file) {
            if (this.files.length > 1) {
                this.removeAllFiles()
                this.addFile(file);
            }
        });