在表单提交中使用jQuery AJAX POST请求发送Dropzonejs文件

时间:2018-11-25 13:48:13

标签: javascript jquery ajax dropzone.js dropzone

我有带有dropzonejs文件上传和注释字段的附件表单,需要将这两个字段的数据发送到jQuery AJAX表单提交的服务器上。

附件HTML表单代码

<form id="addAttachmentForm" method="post" enctype="multipart/form-data" novalidate="novalidate">
<div class="modal-body">
    <div class="companyAttachment box__input dz-clickable"
    </div>
    <textarea class="form-control resizeNone" name="Note" placeholder="Your note here" rows="5"></textarea>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="submit" class="btn btn-primary btn-Attachment" id="add-attachment">ADD ATTACHMENT</button>
</div>

JS代码

$(document).on('submit', '#addAttachmentForm',function(e) {
e.preventDefault();
    $.ajax({
        type: 'POST',
        url: '/attachment/store',
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        beforeSend: function () {
        },
        success: function(response)
        {
            // contactDropzone.processQueue();
        },
        error: function (data) {
        }
    });});

Dropzone.autoDiscover = false;
var contactDropzone = $('.companyAttachment').dropzone({
   url: null,
   paramName: 'file',
   addRemoveLinks: true,
   maxFiles: 1,
   autoProcessQueue: false,
   maxFilesize: 2,
   acceptedFiles: 'image/*,application/pdf',
   init: function(){
       this.on("addedfile", function(file, data) {
       });
   }});

我将autoProcessQueue的默认值设置为false,但是对于何时需要调用 contactDropzone.processQueue()方法来进行AJAX表单提交感到困惑?或者,请向我建议其他任何更好的方法来张贴jQuery AJAX表单提交中的附件和注释字段数据。

0 个答案:

没有答案