web-dev-qa-db-ja.com

成功後にドロップゾーンからプレビューを削除する

Dropzoneの成功イベントの後、またはdropzoneの完了イベントの後に、「ここにファイルをドロップします」というメッセージとともに元のドロップゾーンをロールバックしたいと思います。

成功または完了後にプレビューを見たくありません。

これは私のドロップゾーンスクリプトです：

Dropzone.options.myAwesomeDropzone = {

  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  parallelUploads: 1,
  success: function(file, response) {
    var imageSrc = response;
    $(".img-responsive").attr('src', imageSrc);
    if (imageSrc == '/assets/images/offerfeatimg.jpg') {
      $(".removebutton").hide();
    } else {
      $(".removebutton").show();
    }
  }
};
dropzone.js
6
Adnan Mujkanovic

成功関数でメソッドremoveFileを呼び出すだけで済みます

success: function (file, response) {
   this.removeFile(file);
}

チェック doc dropzone

10
Daniel Arenas

@ kkthxby3のアイデアを活用して、サムネイルのinnerHTMLは、次のコードを使用して成功メソッドでクリアできます。

 success: function (file, response) {
      file.previewElement.innerHTML = "";
 }

このアプローチの利点は、removedFileイベントを発生させずにサムネイルをクリアすることです。

これにより、サムネイルがあったdomに次のhtmlが残ります。

 <div class="dz-preview dz-processing dz-image-preview dz-complete"></div>

しかし、ご覧のとおり、サムネイルの表示を担当する上のdivは空になっています。

別のアプローチは、サムネイルをその内容と一緒にラップする囲んでいるdivさえも削除することです。このアプローチは、successメソッドの次のコードで実行でき、domにサムネイルの痕跡を残しません。

 success: function (file, response) {
      file.previewElement.parentNode.removeChild(file.previewElement);
 }

楽しい。

10
Ron C

ただのfyi ...

メソッド 'removeAllFiles'は、必ずしも主要な選択ではありません。これは「removeFile（file）」と同じです。

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

したがって、これに微調整を加えることもできますが、実際には方法は正しくありません。

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

私の回避策は、dropzoneの含まれているdivを手動でリセットすることです。

document.getElementById（ "divNameWhereDropzoneClassIs"）。innerHTML = ""

これにより、サーバーから画像を削除するために使用されるはずのイベント「removedfile」が発生することなくサムネイルがクリアされます。

2
kkthxby3

私にとって、ファイルプレビューを作成する最も簡単な方法notは、cssを使用することです。

dz-previewとdz-file-previewは、デフォルトのテンプレートによって生成されたプレビューhtmlの外部divにあるいくつかのクラスです。

.dz-preview, .dz-file-preview {
    display: none;
}

また、Dropzone.optionsにサムネイルを作成しないように指示しました。

Dropzone.options.myDropzone = {
    paramName: "file",
    maxFilesize: 2, // MB
    url: 'post_image',

    createImageThumbnails: false, // NO THUMBS!

    init: function () {
      this.on('sending', dz_sending),
      this.on('success', dz_success),
      this.on('error', dz_error),

      this.on('complete', dz_complete) // Once it's done...
    }

ただし、テンプレートはすべてのプレビューhtmlを生成します。したがって、「完全な」関数dz_completeですべて削除します。

function dz_complete(file) {
  $('.dz-preview').remove();  // ...delete the template gen'd html.
}
1
ourmandave

最も簡単な方法は、成功イベントのイベントリスナーを使用して、dropzone removeFile()メソッドを呼び出すことです。

Dropzone.options.myAwesomeDropzone = {
    paramName: "file",
    maxFilesize: 2,
    parallelUploads: 1,
    init: function() {
        this.on("success", function(file, response) {
            var imageSrc = response;
            $(".img-responsive").attr('src', imageSrc);
            if(imageSrc == '/assets/images/offerfeatimg.jpg') {
                $(".removebutton").hide();
            } else {
                $(".removebutton").show();
            }
            this.removeFile(file); // This line removes the preview
        })
    }
};
1
wallek876

file.previewElement.remove()を使用していて、Chromeで正常に動作しますが、IEでは動作しません。次にthis.removeFile(file)を試しましたが、動作しませんでした。その後、ChromeとIE）の両方で機能するfile.previewElement.innerHTML = ""を試しましたが、プレビュー要素があった場所に余分なdivが残ります。私にとってはうまくいきます...

success: function (file, response) {
    file.previewElement.outerHTML = "";
}
0
Giovanni Richaud