Hình thu nhỏ dropzone.js Сlear sau khi tải lên hình ảnh

Question

Tôi đã sử dụng dropzone.js bằng mvc bằng cách theo dõi tutorial này để tải hình ảnh lên nhưng sau khi tải lên hình ảnh, hình thu nhỏ vẫn hiển thị và tôi cần xóa hình ảnh đó sau mỗi lần tải lên một tấm ảnh.

Tôi đã cố gắng thay thế HTML được tạo sau khi tải lên hình ảnh bằng jQuery nhưng nó không hiển thị chính xác như lần đầu tiên tôi cần làm mới trang để hiển thị chính xác nhưng tôi không muốn làm điều đó.

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

Cảm ơn bạn đã trợ giúp trước.

Answer 1

Bạn có thể thử này:

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

biết thêm thông tin ở đây: http://www.dropzonejs.com/#dropzone-methods

Answer 2

nó thực sự là một điều dễ dàng để làm nhưng một thời gian nó đi khó khăn vì vậy tôi chỉ cần xóa vùng thả tạo mã sử dụng jquery và thêm một nút với 'id = btnCreate' sau đó

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

và khi tôi tải lên các hình ảnh thu nhỏ loại bỏ sau khi tôi nhấp vào nút

Answer 3

Một tùy chọn khác (tương tự như trả lời của Giraldi, nhưng sau đó khi tất cả các file được hoàn thành):

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

Answer 4

Chỉ cần một FYI ...

Phương pháp removeAllFiles không nhất thiết phải là lựa chọn hàng đầu. Giống như removeFile(file).

Tôi có trình xử lý sự kiện cho sự kiện removedfile của dropZone ... Tôi đang sử dụng nó để gửi thư máy chủ để xóa tệp tương ứng khỏi máy chủ (nếu người dùng xóa hình thu nhỏ sau khi được tải lên). Sử dụng phương pháp removeAllFiles (cũng như các cá nhân removeFile(file)) cháy sự kiện removedfile đó xóa các hình ảnh được tải lên bên cạnh việc xoá các hình thu nhỏ.

Vì vậy, người ta có thể thêm một số finessing xung quanh này, nhưng trong thực tế của nó phương pháp như đã đề cập trong câu trả lời chính về chủ đề này là không chính xác

Nhìn qua api cho Dropzone Tôi không thấy một cuộc gọi API để chỉ cần đặt lại hoặc xóa hình thu nhỏ ... Phương pháp disable() sẽ xóa tên tệp đã lưu và những gì không không xóa hình thu nhỏ ... Có vẻ dropzoneJS thực sự đang thiếu một cuộc gọi API quan trọng phải trung thực.

Công việc của tôi xung quanh là tự reset div chứa cho vùng thả:

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

này xóa các hình nhỏ mà không bắn ra khỏi sự kiện removedfile mà là vụ phải được sử dụng để xóa một hình ảnh từ máy chủ ...

Answer 5

removeAllFiles() và removeFile() cũng sẽ kích hoạt loại bỏ phía máy chủ, nếu bạn đã ghép Dropzone để xóa tệp.

Các giải pháp để xóa nó chỉ client-side, loại bỏ các bản xem trước tập tin, và nếu bạn đã có một thông điệp trạng thái trống, loại bỏ các lớp dz-started để ngăn chặn sự dropZone CSS từ giấu nó:

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

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

Answer 6

thử này trên dropzone.js của dropzone thư viện của bạn; nhưng thiết lập thời gian để tự động gần 2500

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

Answer 7

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

Trên làm việc cho tôi