How to get the Dropzone.js return value?

2019-03-27 04:04发布

站内问答 / JavaScript
1528 7 5

I just implemented Dropzone.js to make file uploads on my website easier. The file uploads fine, and after it finished uploading I give the file an id and return this id to the browser.

This works fine, except for that I don't know how to catch the id that gets returned from the server. In this SO answer I found some code that should supposedly do that, but it doesn't work for me. The code I have now is pasted below.

Does anybody know how I can get the value that is returned by the server? All tips are welcome!

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

7条回答
时光不老，我们不散
2楼-- · 2019-03-27 04:31

Try this:

Dropzone.options.myAwesomeDropzone = {
    success: function(file, response){
        //alert(response);
        console.log(response);
    }
};
查看更多
0人赞 添加讨论(0) 举报
唯我独甜
3楼-- · 2019-03-27 04:38

Does this help?

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

For example, I have mine set up to attach the server path to the image name and pass this as a value into a form field on submit. As long as you define responseText to point to the file ID you should get a return on this.

This link might be helpful as well: https://github.com/enyo/dropzone/issues/244

查看更多
0人赞 添加讨论(0) 举报
【Aperson】
4楼-- · 2019-03-27 04:38

Looking at the source code of dropzone.js, it seems that there is a lot of events you can listen to.

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

Here the "success" event seems to be appropriate.

A good starting point would be to bind an event listener to your dropzone and see what data you get on such event.

$('#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);
});
查看更多
0人赞 添加讨论(0) 举报
你好瞎i
5楼-- · 2019-03-27 04:41

It works for me

$(function() {
    var myDropzone = new Dropzone(".dropzone");
    myDropzone.on("success", function() {
        alert('Uploaded!');
    });
});
查看更多
0人赞 添加讨论(0) 举报
闹够了就滚
6楼-- · 2019-03-27 04:41 
$("#dropzoneForm").dropzone({
    maxFiles: 2000,
    url: "../Uploader/HttpUploadHandler.ashx?param=" + result.prjID,
    success: function(file, response){
        //alert("Test1");
    }
});
查看更多
0人赞 添加讨论(0) 举报
Bombasti
7楼-- · 2019-03-27 04:51

I am using jQuery and this is what worked for me:

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

Note that the dropzone() method adds an dropzone attribute to the DOM object. You have to call on() on that object - not the jQuery on().

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)