web-dev-qa-db-ja.com

画像をアップロードした後、dropzone.jsのサムネイル画像を消去します

tutorial に従って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>');
javascriptjqueryajaxasp.net-mvcdropzone.js
17
Fadi

これを試すことができます：

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

詳細はこちら： http://www.dropzonejs.com/#dropzone-methods

23
Giraldi

Dropzoneをフックしてファイルも削除すると、removeAllFiles()とremoveFile()もサーバー側の削除をトリガーします。

クライアント側のみをクリアし、ファイルプレビューを削除し、空白の状態メッセージがある場合は、dz-startedクラスを削除して、Dropzone CSSが非表示にしないようにするソリューション：

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

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

別のオプション（Giraldiの回答に似ていますが、すべてのファイルが完了した場合）：

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

それは実際には簡単なことでしたが、時には困難になるため、jqueryを使用してドロップゾーンで生成されたコードを削除し、'id = btnCreate'その後

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

そして、ボタンをクリックした後に削除されたサムネイル画像をアップロードするとき

4
Fadi

ただの...

メソッドremoveAllFilesは必ずしも主な選択肢ではありません。 removeFile(file)と同じです。

DropZoneのremovedfileイベントのイベントハンドラーがあります...サーバーメッセージを送信してサーバーからそれぞれのファイルを削除します（アップロード後にユーザーがサムネイルを削除する必要があります）。メソッドremoveAllFiles（および個別のremoveFile(file))を使用すると、サムネイルをクリアすることに加えて、アップロードされた画像を削除するremovedfileイベントが発生します。

そのため、これにいくつかの罰金を追加することもできますが、実際には、このスレッドの主な回答で述べた方法は正しくありません。

Dropzoneのapiを見ると、サムネイルを単純にリセットまたはクリアするAPI呼び出しが表示されません...メソッドdisable()は、保存されているファイル名をクリアしますが、サムネイルはクリアしません...正直に言うと、dropzoneJSには実際に重要なAPI呼び出しが欠落しているようです。

私の回避策は、dropzoneのdivを手動でリセットすることです：

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

これは、サーバーから画像を削除するために使用されることになっているイベントremovedfileを発生させずにサムネイルをクリアします...

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

上記は私のために働く

2
Irfan Ashraf

ライブラリでこれを試してください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);
    });
  }
},
0
heriipurnama

これらのサムネイルを消去する別の方法

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

次のように呼び出します：

{your_dropzone}.removeThumbnail();
0
jfernandez_04