web-dev-qa-db-ja.com

dropzone.jsに画像をプリロードする方法

Webページに次のオプションを持つdropzone.jsインスタンスがあります。

autoProcessQueue:false
uploadMultiple:true
parallelUploads:20
maxFiles:20

より大きな形式の一部であるため、プログラムでインスタンス化されます。フォームが送信されたときにキューを処理するために装備されています。

目標は、ユーザーがドロップゾーンを使用してアイテムの画像を管理できるようにすることです。そのため、アイテムの「編集/更新」ビューを読み込むとき、以前にあった画像でドロップゾーンをプリロードしたいと思いますそのアイテムにアップロードされました。これを実装して、既存のアイテムが画像リストに変更を送信したときに再アップロードされないようにする良い方法はありますか？

previewdropzone.jspreloading
28
ralbatross

適切な方法は、dropzone jsで提供される.emitメソッドを使用してファイルとサムネイルを追加し、サーバーから画像をプリロードすることです。以下のサンプルコードを参照してください。 https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server から取得

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");

dropzoneの.emitメソッドはinit関数をトリガーし、addedfileイベントコールバックが記述されている場合。例えばaddedfileイベントを使用して、削除ボタンを追加し、画像の削除機能を追加しました。

37
microchip78

Dropzoneは非常に強力で素晴らしいので、何でもできます。
従うべき手順->

1）まず最初に、すべてのファイル名とそのサイズを取得し、json応答として送信するサーバー側スクリプトを作成する必要があります。
PHPコード：

  foreach($myitemfiles as $file){ //get an array which has the names of all the files and loop through it 
        $obj['name'] = $file; //get the filename in array
        $obj['size'] = filesize("uploadsfolder/".$file); //get the flesize in array
        $result[] = $obj; // copy it to another array
      }
       header('Content-Type: application/json');
       echo json_encode($result); // now you have a json response which you can use in client side

2）レスポンスを使用して、アップロードされたファイルを表示できます。dropzoneinit関数内に以下のコードを記述します
Javascriptコード：

  init: function() {

      var thisDropzone = this;

        $.getJSON('get_item_images.php', function(data) { // get the json response

            $.each(data, function(key,value){ //loop through it

                var mockFile = { name: value.name, size: value.size }; // here we get the file name and size as response 

                thisDropzone.options.addedfile.call(thisDropzone, mockFile);

                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploadsfolder/"+value.name);//uploadsfolder is the folder where you have all those uploaded files

            });

        });
}

注： filenameのファイル全体のURLパスを取得しないでください。
これは動作します

28
Vishal Nair