web-dev-qa-db-ja.com

Dropzone.jsの戻り値を取得するにはどうすればよいですか？

私は Dropzone.js を実装しただけで、ウェブサイトへのファイルのアップロードが簡単になりました。ファイルは正常にアップロードされ、アップロードが完了したら、ファイルにIDを付けて、このIDをブラウザーに返します。

サーバーから返されるIDをキャッチする方法がわからない場合を除いて、これは正常に機能します。 this SO answer でそれを実行するはずのコードが見つかりましたが、それは私には機能しません。現在使用しているコードを以下に貼り付けます。

サーバーから返される値を取得する方法を誰かが知っていますか？すべてのヒントは大歓迎です！

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/external/dropzone.min.js"></script>
    <link href="/static/css/external/dropzone.css" rel="stylesheet">

<script type="text/javascript">
    $(function() {

        Dropzone.options.uiDZResume = {
            success: function(file, response){
                console.log('WE NEVER REACH THIS POINT.');
                alert(response);
            }
        };
    });
</script>

</head>
<body>
<form action="/doc"
      class="dropzone"
      id="my-awesome-dropzone"></form>
</body>
</html>
javascripthtmlfile-uploaddropzone.js
8
kramer65

Dropzone.jsのソースコードを見ると、聴けるイベントがたくさんあるようです。

events: [
  "drop"
  "dragstart"
  "dragend"
  "dragenter"
  "dragover"
  "dragleave"
  "addedfile"
  "removedfile"
  "thumbnail"
  "error"
  "errormultiple"
  "processing"
  "processingmultiple"
  "uploadprogress"
  "totaluploadprogress"
  "sending"
  "sendingmultiple"
  "success"
  "successmultiple"
  "canceled"
  "canceledmultiple"
  "complete"
  "completemultiple"
  "reset"
  "maxfilesexceeded"
  "maxfilesreached"
]

ここでは、「成功」イベントが適切なようです。

開始点としては、イベントリスナーをドロップゾーンにバインドし、そのようなイベントで取得するデータを確認することをお勧めします。

$('#my-awesome-dropzone').on('success', function() {
  var args = Array.prototype.slice.call(arguments);

  // Look at the output in you browser console, if there is something interesting
  console.log(args);
});
18
tomaoq
$("#dropzoneForm").dropzone({
    maxFiles: 2000,
    url: "../Uploader/HttpUploadHandler.ashx?param=" + result.prjID,
    success: function(file, response){
        //alert("Test1");
    }
});
8
Rohit Dodiya

これは役に立ちますか？

Dropzone.options.myDropzone = {
  init: function() {
        thisDropzone = this;
        this.on("success", function(file, responseText) {
            var responseText = file.id // or however you would point to your assigned file ID here;
            console.log(responseText); // console should show the ID you pointed to
            // do stuff with file.id ...
        });
    }
};

たとえば、サーバー名をイメージ名に関連付け、送信時にフォームフィールドに値として渡すように設定しました。ファイルIDを指すようにresponseTextを定義している限り、これで戻り値が返されるはずです。

このリンクも役に立つかもしれません： https://github.com/enyo/dropzone/issues/244

6
code-sushi

これを試して：

Dropzone.options.myAwesomeDropzone = {
    success: function(file, response){
        //alert(response);
        console.log(response);
    }
};
3
Bozu

わたしにはできる

$(function() {
    var myDropzone = new Dropzone(".dropzone");
    myDropzone.on("success", function() {
        alert('Uploaded!');
    });
});
1
Jhonny Jr.

私はjQueryを使用していますが、これは私にとってうまくいきました：

_var dz = $(".my-awesome-dropzone").dropzone()[0];
dz.dropzone.on("success", function (file, response) { ... }));
_

dropzone()メソッドはdropzone属性をDOMオブジェクトに追加することに注意してください。 thatオブジェクトに対してjQuery on()ではなくon()を呼び出す必要があります。

0
andy

これをコメントとして追加したかったのですが、評判が低いので追加できません。

それでもサーバーからの応答を取得できない場合は、チャンクを使用している場合、Dropzoneはこの状況で空の応答をハードコーディングします。

https://github.com/enyo/dropzone/blob/caf200c13fd3608dd6bed122926d5848927f55b4/dist/dropzone.js#L2344

if (allFinished) {
    _this14.options.chunksUploaded(file, function () {
        _this14._finished(files, '', null);
     });
}

したがって、チャンクされたアップロードでは、レスポンスの取得はサポートされていないようです。

0
Ovidiu