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>

i изменено dropzone.js

maxFiles: 1

он позволяет загружать только один файл, но я не могу удалить ранее загруженный файл .please помогите мне out.thanks заранее

Ответы

Ответ 1

maxFiles: 1 используется, чтобы сообщить dropzone, что должен быть только один файл. При наличии более одного файла будет вызываться функция maxfilesexceeded, причем файл с превышением в качестве первого параметр.

здесь простая функция для удаления предварительного просмотра первого файла и добавления нового:)

maxFiles:1,
init: function() {
      this.on("maxfilesexceeded", function(file) {
            this.removeAllFiles();
            this.addFile(file);
      });
}

Ответ 2

Ограничение maxFiles до 1 все еще позволяет выбирать несколько файлов в диалоговом окне загрузки. Чтобы запретить выбор нескольких изображений в конфигурации, укажите следующую функцию init:

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

Ответ 3

Я использовал событие maxfilesexceeded с методом addFile и перешел в бесконечный цикл вызова события. Должна быть проблема использования addFile, потому что я не видел, чтобы это упоминалось как на официальном сайте, так и на вики GitHub. Наконец, я решил с событием addedfile. Dropzone.js является последней версией, когда я пишу (4.3.0).

init: function() {
  this.on('addedfile', function(file) {
    if (this.files.length > 1) {
      this.removeFile(this.files[0]);
    }
  });
}

Ответ 4

Ни одно из этих решений не работало для меня.

Событие maxfilesexceeded вызывается слишком поздно, то есть после попытки добавить файл.

Другие решения с использованием this.removeFile(this.files[0]); привели к "Uncaught TypeError: Cannot read property 'removeChild' of null". или бесконечному циклу.

Решено -

maxFiles: 2,
init: function () {

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

}

Работает при использовании dz-clickable (выбор файла btn) и перетаскивания.