如何获取Dropzone.js返回值

How to get the Dropzone.js return value?

本文关键字：Dropzone js 返回值 获取 何获取      更新时间：2023-09-26

我刚刚实现了Dropzone.js，使文件上传到我的网站上更容易。文件上传很好，上传完成后，我给文件一个id，并将该id返回给浏览器。

这很好，除了我不知道如何捕获从服务器返回的id。在这个SO答案中，我发现了一些应该这样做的代码，但它对我不起作用。我现在的代码粘贴在下面。

有人知道我如何获得服务器返回的值吗？欢迎所有提示！

<!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>

查看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);
});

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

这有帮助吗？

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

试试这个：

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

它适用于我的

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

我正在使用jQuery，这对我来说很有效：

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

注意，dropzone()方法将dropzone属性添加到DOM对象。您必须对对象调用on()，而不是jQuery on()。

我想把它作为注释添加，但我做不到，因为我的声誉很低。

对于那些仍然难以从服务器检索响应的人来说，如果你使用分块，Dropzone在这种情况下会硬编码一个空白响应：

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

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

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

相关文章：