Сlear dropzone.js image miniature après le téléchargement d'une image

J'ai de l'aide dropzone.js dans mvc en suivant ce tutoriel pour télécharger des images, mais après téléchargement de l'image de la vignette de l'image montre toujours et j'en ai besoin de les enlever après chaque fois que j'upload une image.

J'ai essayé de remplacer le code HTML généré après téléchargement de l'image à l'aide de jQuery, mais il n'affichant pas correctement, que la première fois que j'ai besoin de rafraîchir la page pour afficher correctement, mais je ne veux pas le faire.

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

Merci pour toute aide à l'avance.

source d'informationauteur Fadi

  1. 17

    Vous pouvez essayer ceci:

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

    Plus d'informations ici:
    http://www.dropzonejs.com/#dropzone-methods

  2. 5

    Une autre option (similaire à répondre de Giraldi, mais ensuite, lorsque tous les fichiers sont remplis): 

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

    removeAllFiles() et removeFile() va déclencher le serveur-côté également de la suppression, si vous accro Dropzone pour supprimer les fichiers.

    La solution pour effacer uniquement côté client, supprimer le fichier de prévisualisation, et si vous aviez un vide de message d'état, retirez le dz-started classe pour éviter la Dropzone CSS de le cacher:

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

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

    c'était en fait une chose facile à faire, mais quelque temps il aller plus dur je viens donc de supprimer la dropzone code généré à l'aide de jquery et ajouter un bouton avec 'id = btnCreate' puis

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

    et quand je télécharge l'image miniature retiré après je clique sur le bouton

  5. 2

    Juste un avis...

    La méthode removeAllFiles n'est pas forcément le premier choix. Qui est le même que removeFile(file).

    J'ai un gestionnaire d'événement pour la dropZone de removedfile cas... je l'utilise pour envoyer un message serveur pour supprimer des fichiers à partir du serveur (si un utilisateur de supprimer la vignette après avoir été téléchargés). À l'aide de la méthode removeAllFiles (ainsi que la individualisée removeFile(file)) déclenche l'événement removedfile qui supprime les images uploadées en plus de l'effacement de la vignette.

    Donc, on pourrait ajouter un peu de peaufiner autour de cela, mais dans la réalité de la méthode comme mentionné dans la première réponse sur ce fil n'est pas correcte.

    À la recherche par le biais de l'api pour Dropzone je ne suis pas le voir un appel API pour faire un reset ou désactivez les vignettes... La méthode disable() va effacer le fichier enregistré noms, et de ce pas, mais n'efface pas les vignettes... Semble dropzoneJS est pas une critique de l'appel API pour être honnête.

    Mon travail est de réinitialiser manuellement le div contenant pour dropzone:

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

    Cela efface les vignettes sans coup d'envoi de l'événement removedfile qui est censé être utilisé pour la suppression d'une image à partir du serveur...

  6. 0

    essayez ceci sur votre bibliothèque dropzone dropzone.js; mais de définir le temps de fermeture automatique 2500

    success: function(file) {
  if (file.previewElement) {
    return file.previewElement.classList.add("dz-success"),
    $(function(){
      setTimeout(function(){
        $('.dz-success').fadeOut('slow');
      },2500);
    });
  }
},
  7. 0
    docsDropzone.on('complete', function (response)
{
   $(".dz-preview").remove();
});

    Ci-dessus fonctionne pour moi

  8. 0

    Une autre façon d'effacer ces vignettes

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

    puis vous l'appeler comme ceci:

    {your_dropzone}.removeThumbnail();