Question

我刚刚实施了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>

Answer 1

查看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"
]

这里的“成功”事件似乎是合适的。

一个好的起点是将事件监听器绑定到您的dropzone，并查看您在此类事件中获得的数据。

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

Answer 2

$("#dropzoneForm").dropzone({
    maxFiles: 2000,
    url: "../Uploader/HttpUploadHandler.ashx?param=" + result.prjID,
    success: function(file, response){
        //alert("Test1");
    }
});

Answer 3

这有帮助吗？

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 ...
        });
    }
};

例如，我已将我的设置附加到图像名称的服务器路径，并将其作为值传递到提交中的表单字段。只要您定义responseText以指向文件ID，您就应该获得返回。

此链接也可能有用：https://github.com/enyo/dropzone/issues/244

Answer 4

试试这个：

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

Answer 5

它对我有用

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

Answer 6

我正在使用jQuery，这对我有用：

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

请注意，dropzone()方法会向DOM对象添加dropzone属性。您必须在那个对象上调用on()，而不是jQuery on()。

Answer 7

我想将此添加为评论，但我不能，因为我的声誉很低。

对于那些仍然无法从服务器检索响应的人，如果您正在使用分块，Dropzone会在这种情况下对空白响应进行硬编码：

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

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

因此，对于分块上传，似乎不支持检索响应。

如何获取Dropzone.js的返回值？

7 个答案: