Question

您好我正在使用Dropzone工作到我的Dropbox API我想知道为什么我的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放入内部，如果我的处理，但我认为它doesent读取我的ajax请求

Answer 1

在this.on("drop", function(event)函数中填写Init函数并调用您的ajax方法在此drop函数中上传图片，请在下面的代码段中找到

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Dropzone js不会触发ajax调用

2 个答案: