Очистить dropzone.js миниатюру после загрузки изображения

Я использую dropzone.js в mvc, следуя этому руководству по загрузке изображений, но после загрузки изображения, которое показывается миниатюрным изображением, и мне нужно его удалить после каждого раза, когда я загружаю изображение.

Я попытался заменить сгенерированный HTML после загрузки изображения с помощью jQuery, но он не отображается правильно, так как в первый раз мне нужно обновить страницу, чтобы показывать правильно, но я не хочу этого делать.

 $("#ImageUpload").replaceWith('<form action="/Products/SaveUploadedFile" method="post" enctype="multipart/form-data" class="dropzone dz-clickable" id="dropzoneForm">'
 +'<div class="fallback">'
 +'<input name="file" type="file" multiple />'
 +'<input type="submit" value="Upload" />'
 +'</div>');

Ответ 1

Вы можете попробовать следующее:

myDropzone.on("complete", function(file) {
  myDropzone.removeFile(file);
});

Дополнительная информация здесь: http://www.dropzonejs.com/#dropzone-methods

Ответ 2

Другой вариант (аналогичный ответу Giraldi, но затем, когда все файлы завершены):

myDropzone.on("queuecomplete", function () {
    this.removeAllFiles();
});

Ответ 3

removeAllFiles() и removeFile() также вызовет удаление на стороне сервера, если вы также зацепили Dropzone для удаления файлов.

Решение, чтобы очистить его только на стороне клиента, удалить предварительный просмотр файла, и если у вас было пустое сообщение состояния, удалите класс dz-started, чтобы предотвратить его скрытие CSS-кода Dropzone:

$('.dropzone')[0].dropzone.files.forEach(function(file) { 
  file.previewElement.remove(); 
});

$('.dropzone').removeClass('dz-started');

Ответ 4

на самом деле было легко сделать что-то, но в какой-то момент это сложно, поэтому я просто удаляю сгенерированный код с помощью jQuery и добавляю кнопку с 'id = btnCreate', затем

 $('#btnCreate').click(function () {
        $('div.dz-success').remove();
   });

и когда я загружаю уменьшенное изображение, удаленное после нажатия кнопки

Ответ 5

Просто fyi...

Метод removeAllFiles не обязательно является основным выбором. Это то же самое, что и removeFile(file).

У меня есть обработчик событий для события dropZone removedfile... Я использую его для отправки сообщения сервера, чтобы удалить соответствующий файл с сервера (если пользователь удалит миниатюру после ее загрузки). Использование метода removeAllFiles (а также индивидуализированное removeFile(file)) вызывает событие removedfile, которое удаляет загруженные изображения в дополнение к очистке эскизов.

Таким образом, можно было бы добавить некоторую уловку вокруг этого, но в реальности этого метод, упомянутый в основном ответе на этот поток, неверен.

Просматривая api для Dropzone, я не вижу вызов API просто reset или очищаю эскизы... Метод disable() очистит сохраненные имена файлов и то, что не, но не очистит миниатюры.. Кажется, что dropzoneJS на самом деле пропускает критический вызов API, чтобы быть честным.

Моя работа - это вручную reset содержащий div для dropzone:

document.getElementById("divNameWhereDropzoneClassIs").innerHTML = ""

Это очищает эскизы, не отключая событие removedfile, которое предполагается использовать для удаления изображения с сервера...

Ответ 6

попробуйте это в вашей dropzone.js вашей библиотеки dropzone.js; но установить время автоматического закрытия 2500

success: function(file) {
  if (file.previewElement) {
    return file.previewElement.classList.add("dz-success"),
    $(function(){
      setTimeout(function(){
        $('.dz-success').fadeOut('slow');
      },2500);
    });
  }
},

Ответ 7

docsDropzone.on('complete', function (response)
{
   $(".dz-preview").remove();
});

Над работой для меня

Ответ 8

Еще один способ очистить эти миниатюры

Dropzone.prototype.removeThumbnail = function () {
    $(".dz-preview").fadeOut('slow');
    $(".dz-preview:hidden").remove();
};

то вы называете это следующим образом:

{your_dropzone}.removeThumbnail();