Dropzone js不会触发ajax调用

Question

您好，我目前正在使用 Dropbox API 的 Dropzone 我想知道为什么我的 dropzone 不能调用我的 ajax 请求？我将我的 ajax 请求放在我的 init:function 中，并认为它会起作用，因为我的按钮功能起作用。我想知道是否存在逻辑错误或者我只是放错了我的 ajax 请求..

 <form id="files" action="/" class="dropzone" name="files[]" ></form>
<input type = "button" id = "btnsubmit" value = "Submit"></input>

这是我的 js

Dropzone.options.files = {

    autoProcessQueue : false,
    dictDefaultMessage: "Drop files or click here to upload  file(s) ...",

    init : function() {


        function uploadfiles(upl) {

            var files = upl.target.files;
            var url = "https://content.dropboxapi.com/2/files/upload";

            for (var i = 0, file_name; file_name = files[i]; i++) {

                $.ajax({
                    url: url,
                    type: 'post',
                    data: file_name,
                    processData: false,
                    contentType: 'application/octet-stream',
                    headers: {
                        "Authorization": "ACCESTOKEN",
                        "Dropbox-API-Arg": '{"path": "/' + file_name.name + '","mode": "add"}'
                    },


                    success: function (data) {
                        this.on("processing", function(file) {
                            this.options.url = url;
                            alert('Success Upload');
                        });

                        console.log(data);

                    },
                    error: function (data) {
                        console.log(data);
                    }

                })

            }



            files = this;


            this.on("drop", function(event) {
                console.log(files.files);
            });
            Dropzone.autoDiscover = false;

            $('#btnsubmit').click(function(){
                files.processQueue();

            });

        }
        document.getElementById('files').addEventListener('change', uploadfiles, false);


    }
}

如果我正在处理，我尝试将我的 ajax 放入其中，但我认为它不会读取我的 ajax 请求

Answer 1

将您的this.on("drop", function(event) 函数放入Init 函数中并调用您的ajax 方法在此drop 函数中上传图片，请在下面找到sn-p

Dropzone.options.MyDropzone = {
  var FormActionURL;
    init : function() {
      myDropzone = this;
        this.on("drop", function(event) {
           alert("Form Action URL:- "FormActionURL);
           //Put your ajax call here for upload image 
           console.log(myDropzone.files);
        });
    }
};

#drop_zone {
    width: 50%;
    border: 2px dashed #BBB;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    color: #BBB;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brightscreentv.net/WAYW/js/dropzone.js"></script>
<div id='drop_zone'>
    <form action="https://content.dropboxapi.com/2/files/upload" class='dropzone' id='MyDropzone'></form>
</div>

Answer 2

我不知道 dropbox api 是如何工作的，但这是你可以用 Dropzone 做的。但是您必须在服务器端处理文件。如果您有服务器 (XAMPP)，您可以尝试在那里上传文件，然后向您的 Dropbox api 发出请求。

init: function(){
    /* Called once the file has been processed. It could have failed or succeded */
    this.on("complete", function(file){
        
    });
    /* Called after the file is uploaded and sucessful */
    this.on("sucess", function(file){
        
    });
    /* Called before the file is being sent */
    this.on("sending", function(file){
        
    });
}