Dropzone js不会触发ajax调用 [英] Dropzone js wont trigger an ajax call

问题描述

您好我正在使用Dropzone工作到我的Dropbox API我想知道为什么我的dropzone无法调用我的ajax请求？我把我的ajax请求放在我的 init：function 中，并认为它会起作用，因为我的按钮功能正常工作。我想知道是否存在逻辑错误或者我错放了我的ajax请求..

Hi I'm currently working in a Dropzone to my Dropbox API I was wondering why is my dropzone cant call my ajax request? I put my ajax request inside of my init:function and thought it will work because the function of my button work. I was wondering if there's a logical error or I just misplaced my ajax request..

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

I Tried to put my ajax inside if my processing but I think it doesent read my ajax request

推荐答案

Pu你的这个.on（drop，function（event）函数在 Init 函数中并调用你的ajax方法在这个 drop 功能请在下面找到代码段

Pu your this.on("drop", function(event) function inside Init function and call your ajax method to upload image inside this drop function please find below snippet

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>

这篇关于Dropzone js不会触发ajax调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！