webentwicklung-frage-antwort-db.com.de

Löschen Sie das Miniaturbild von dropzone.js, nachdem Sie ein Bild hochgeladen haben

Ich habe dropzone.js in mvc verwendet, indem ich diesem Tutorial zum Hochladen von Bildern gefolgt bin, aber nach dem Hochladen des Bildes wird das Miniaturbild immer noch angezeigt und ich muss es nach jedem Hochladen eines Bildes entfernen.

Ich habe versucht, den generierten HTML-Code nach dem Hochladen des Bildes mit jQuery zu ersetzen, aber es wird nicht richtig angezeigt, da ich zum ersten Mal die Seite aktualisieren muss, um sie korrekt anzuzeigen. Dies möchte ich jedoch nicht.

 $("#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>');
15
Fadi

Sie können dies versuchen:

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

Weitere Informationen hier: http://www.dropzonejs.com/#dropzone-methods

20
Giraldi

removeAllFiles() und removeFile() lösen auch die serverseitige Entfernung aus, wenn Sie Dropzone ebenfalls zum Entfernen von Dateien angehängt haben.

Die Lösung, die nur clientseitig gelöscht werden soll, entfernt die Dateivorschau. Wenn Sie eine leere Statusmeldung hatten, entfernen Sie die Klasse dz-started, um zu verhindern, dass Dropzone CSS sie verbirgt:

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

$('.dropzone').removeClass('dz-started');
7
Flavio Copes

Eine weitere Option (ähnlich der Antwort von Giraldi, aber wenn alle Dateien fertig sind) 

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

es war eigentlich eine einfache Sache, aber einige Zeit wird es hart, deshalb lösche ich einfach den durch dropzone erzeugten Code mit jquery und füge einen Button mit 'id = btnCreate' hinzu

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

und wenn ich das Thumbnail-Bild hochlade, nachdem ich auf die Schaltfläche geklickt habe 

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

Oben funktioniert für mich

2
Irfan Ashraf

Nur ein Fyi ...

Die Methode removeAllFiles ist nicht unbedingt die erste Wahl. Welches ist das Gleiche wie removeFile(file)

Ich habe einen Ereignishandler für das DropZone-Ereignis removedfile ... Ich verwende damit eine Server-Nachricht, um die entsprechende Datei vom Server zu löschen (falls ein Benutzer das Miniaturbild nach dem Hochladen löscht). Mit der Methode removeAllFiles (sowie der individualisierten removeFile(file)) wird das Ereignis removedfile ausgelöst, das die hochgeladenen Bilder zusätzlich zum Löschen der Miniaturbilder löscht.

Man könnte also ein paar Details hinzufügen, aber in der Realität ist die Methode, die in der primären Antwort in diesem Thread erwähnt wurde, nicht korrekt. 

Durchsuchen der API für Dropzone Ich sehe keinen API-Aufruf zum einfachen Zurücksetzen oder Löschen der Thumbnails ... Die Methode disable() löscht die gespeicherten Dateinamen und was nicht, löscht aber nicht die Thumbnails ... Scheint dropzoneJS tatsächlich ein kritischer API-Aufruf, um ehrlich zu sein.

Meine Aufgabe ist es, das enthaltende div für dropzone manuell zurückzusetzen:

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

Dadurch werden die Miniaturansichten gelöscht, ohne dass das Ereignis removedfile ausgelöst wird, das zum Löschen eines Bildes vom Server verwendet werden soll.

2
kkthxby3

versuchen Sie dies in Ihrer Bibliothek dropzone dropzone.js; Stellen Sie jedoch das Zeitlimit für das automatische Schließen von 2500 ein

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

Eine andere Möglichkeit, diese Miniaturansichten zu löschen

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

dann nennst du es so:

{your_dropzone}.removeThumbnail();
0
jfernandez_04