在ajax完成后将值传递到dropzone发送选项

时间:2015-07-23 07:23:45

标签: php jquery ajax laravel-5 dropzone.js

所以我正在使用dropzone,一切都上传得很好,但现在我将图像路径添加到数据库中。我遇到的问题是我首先要提交一个带有ajax的表单,在成功完成之后我想将数据库中新创建的ID传递给dropzone的发送选项。一切都是分开工作,但我无法弄清楚如何将新ID放入dropzone的发送选项中。以下是我的两段相关代码。

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#dropzonePreview", {

    url: "list/post-image",
    parallelUploads: 6,
    autoProcessQueue: false,
    processing: function(){
        this.options.autoProcessQueue = true;
    },
    sending: function(file, xhr, formData) {

        formData.append("_token", $('[name=_token]').val());
    }

});

这是ajax调用。我想我会尝试myDropzone.options.sending,但我可以弄清楚如何附加formData,就像上面的代码一样。

var form = $('form', wizard).serialize();
        $.ajax({
            type: "POST",
            url: 'list',
            data: form,
            success: function(data) {
                if (data.success)
                {
                    myDropzone.options.sending(null, null, formData)
                    {
                        formData.append("propertyID",         $('[name=propertyID]').val(data.propertyID));
                    }

                }
            }
        });
希望这只是我想念的小事。感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

我只是做了一些修修补补,一些谷歌搜索,我找到了答案。而不是使用发送选项,params选项可以创建一个隐藏字段。这是我的ajax代码,它使它工作。

$.ajax({
            type: "POST",
            url: 'list',
            data: form,
            success: function(data) {
                if (data.success)
                {
                    myDropzone.options.params = {'propertyID': data.propertyID};
                }
                myDropzone.processQueue();
            }
        });

答案 1 :(得分:0)

你必须把你的dropzone进程队列放在ajax成功之外:像这样:  Dropzone.options.dropzoneJsForm = {         autoProcessQueue:false,         acceptedFiles:" .png,.jpg,.gif,.bmp,.jpeg,.pdf,.rar,.zip",         maxFilesize:2,         maxFiles:5,         addRemoveLinks:true,

    init: function () {
        var submitButton = document.querySelector("#btnReg");
         myDropzone = this; //closure
         submitButton.addEventListener("click", function () {

             var coursenameID = $('#coursenameID').val();
             var coursetypecodeID = $('#courseTypeCodeID').val();
             var hdcourseexecuterID = $('#hdCourseExecuterID').val();
             //var coursecreationDateID = $('#courseCreationDateID').val();
             var selectedpersons = [];
             $("#doublerow input:checked").each(function () { selectedpersons.push($(this).val()) });

             $.ajax({
                 url: '@Url.Action("InsertToDB", "Course")',
                 type: "POST",
                 dataType: "json",
                 traditional: true,

                 data: { "coursenameID": coursenameID, "coursetypecodeID": coursetypecodeID, "hdcourseexecuterID": hdcourseexecuterID, "selectedpersons": selectedpersons },
                 beforeSend: function () {
                     $('#savingdata').addClass('show');
                 },
                 success: function (Response) {
                     console.log(Response);
                     if (Response > 0) {
                         courseid = Response;
                         console.log(Response);
                         $('#savingdata').addClass('hide');

                     }

                 }

             });
             myDropzone.options.params = { 'propertyID': courseid };
         myDropzone.processQueue();
        });

    }
};