Question

我有一个使用laravel验证提交表单数据的Ajax。

<div id="fileInput" class="dropzone">
    <input name="p_file" type="file" multiple />
</div>

Dropzone.autoDiscover = false;
new Dropzone('#fileInput', {
    // paramName: 'p_file',
    url: "/admin/products/upload",
    // autoProcessQueue: false,
    addRemoveLinks: true,

    init: function () {
        var myDropzone = this;
        myDropzone.on('success', function (file, serverResponse) {
            var fileuploded = file.previewElement.querySelector("[data-dz-name]");
            fileuploded.innerHTML = serverResponse;
        });

        myDropzone.on('removedfile', function(file, response) {
            var name = file.previewElement.querySelector('[data-dz-name]').innerHTML;
        });

        sending: function (file, xhr, formData) {
            // formData.append("name", $('#name').val());
        }
})

然后还在单独的Ajax URL中上传/删除Dropzone文件。

sending: function (file, xhr, formData) {
        // formData.append("name", $('#name').val());
    }

根据文档，我必须使用它来进行正常的表单提交。

<div class="chkdropdown">
          Show and Hide Columns
        <ul>
             <li>
               <input type="checkbox" class="hidecol" value="name" id="col_2" />&nbsp;S NO&nbsp;                
            </li>
            <li>
                <input type="checkbox" class="hidecol" value="name" id="col_3" />&nbsp;DrugName&nbsp;                
           </li>
           <li>
              <input type="checkbox" class="hidecol" value="salary" id="col_4" />&nbsp; Generic Name&nbsp;                  
           </li>
           <li>
              <input type="checkbox" class="hidecol" value="gender" id="col_5" />&nbsp;Generic Combination&nbsp;                    
            </li>
            <li>
                <input type="checkbox" class="hidecol" value="city" id="col_6" />&nbsp;Dosage &nbsp;              
              </li>
              <li>
                  <input type="checkbox" class="hidecol" value="email" id="col_7" />&nbsp;VAT &nbsp;               
                </li>
        </ul>
    </div>

但是我想将Dropzone值附加到第一个Ajax的form_data中，而不是像文档中那样将其他form_data附加到Dropzone。我该怎么办？

Answer 1

将dropzone文件分配到一个varialbe中，然后将其添加到FormData对象

$('body').on('click', '#submit', function(){
var fileUpload = $('#fileInput').get(0).dropzone;
var files = fileUpload.files;
var form_data= new FormData();

// Looping over all files and add it to FormData object  
    for (var i = 0; i < files.length; i++) {
        form_data.append(files[i].name, files[i]);
    }

 $.ajax({
     url:'/admin/products/',
     type:'POST',
     processData: false,
     contentType: false,
     dataType: 'json',
     data:form_data,
     success:function(data) {

     },
 });

如何将Dropzone返回值附加到表单数据

1 个答案: