이미지 업로드 후 dropzone.js 섬네일 이미지 지우기

이미지 업로드 후 dropzone.js 섬네일 이미지 지우기

이미지 업로드를 위해 이 튜토리얼에 따라 mvc에서 dropzone.js를 사용했지만 이미지를 업로드한 후에도 섬네일 이미지가 계속 표시되므로 이미지를 업로드할 때마다 제거해야 합니다.

jQuery를 사용하여 이미지를 업로드한 후 생성된 HTML을 교체하려고 시도했지만 올바르게 표시하기 위해 페이지를 새로 고쳐야 하는 첫 번째 경우로 올바르게 표시되지 않습니다.

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

사용해 볼 수 있습니다.

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

자세한 내용은 여기에서 확인하십시오. http://www.dropzonejs.com/ #dropzone-message

removeAllFiles()그리고.removeFile()파일도 제거하기 위해 Dropzone을 후크한 경우 서버 측 제거도 트리거합니다.

클라이언트 측만 지우고, 파일 미리 보기를 제거하고, 빈 상태 메시지가 있는 경우 제거하는 솔루션dz-startedDropzone CSS가 숨기는 것을 방지하는 클래스:

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

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

다른 옵션(Giraldi의 답변과 비슷하지만 모든 파일이 완료되면):

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

그것은 사실 쉬운 일이었지만 가끔은 어려워져서 나는 jquery를 사용하여 드롭존 생성 코드를 삭제하고 버튼을 추가합니다.'id = btnCreate'그리고나서

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

그리고 내가 버튼을 클릭한 후 제거된 썸네일 이미지를 업로드할 수 있습니다.

그냥...

방법removeAllFiles반드시 최고의 선택은 아닙니다.와 같은 것은?removeFile(file).

dropZone의 이벤트 핸들러가 있습니다.removedfile이벤트...서버에서 해당 파일을 삭제하기 위해 서버 메시지를 보내는 데 사용합니다(섬네일이 업로드된 후 사용자가 삭제한 경우).메소드 사용removeAllFiles(개인화된 것뿐만 아니라)removeFile(file))이벤트를 시작합니다.removedfile업로드된 이미지를 삭제하고 미리 보기를 삭제합니다.

따라서 이 문제를 해결하기 위해 미세한 부분을 추가할 수 있지만 실제로는 이 스레드의 기본 답변에 언급된 방법이 올바르지 않습니다.

Dropzone에 대한 API를 살펴보니 단순히 미리 보기를 재설정하거나 지우는 API 호출이 보이지 않습니다...방법disable()저장된 파일 이름과 그렇지 않은 파일 이름을 지우지만 미리 보기를 지우지는 않습니다...드롭존인 것 같습니다.JS는 사실 중요한 API 호출을 놓치고 있습니다.

해결 방법은 드롭존에 포함된 div를 수동으로 재설정하는 것입니다.

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

이렇게 수 .removedfile서버에서 이미지를 삭제하는 데 사용해야 하는...

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

위는 나에게 도움이 됩니다.

드롭존 옵션에서 전체 이벤트를 청취하면 매우 간단합니다.

const dropZoneOptions = {
        url: ...,
        // complete event
        complete: function(file) {
          setTimeout(() => {
            this.removeFile(file); // right here after 3 seconds you can clear
          }, 3000);
        },
      }

라이브러리 dropzone dropzone.js에서 시도해 보십시오. 그러나 시간 제한을 자동으로 2500로 설정합니다.

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

미리 보기를 지우는 또 다른 방법

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

그런 다음 이렇게 부릅니다.

{your_dropzone}.removeThumbnail();

언급URL : https://stackoverflow.com/questions/24791879/clear-dropzone-js-thumbnail-image-after-uploading-an-image