DropzoneJS：上傳文件並提交表格名稱

Question

的陣列所以我有這個漫長複雜的形式（我就長話短說）

<form> 
    <section> 
     <input type="text" name="customer" id="customer"> 
     <input type="text" name="address" id="address"> 
     <input type="text" name="contact_number" id="contact_number"> 
    </section> 
    <section> 
     <input type="text" name="product_name[]" class="product_name"> 
     <input type="text" name="qty[]" class="qty"> 
     <input type="text" name="brand[]" class="brand"> 
     <input type="text" name="model[]" class="model"> 

     <div class="file_upload"></div> 

     <button type="submit" id="submit_btn">Submit Form</button> 
    </section> 

</form> 

，我使用DropzoneJS上傳文件。這裏的問題是我需要傳遞表單字段值，尤其是那些帶有名稱屬性數組的輸入。

這裏是我的JS代碼至今：

var myDropzone = new Dropzone("div.file_upload", { 
    url: upload, 
    headers: { 
     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
    }, 
    autoProcessQueue: false, 
    addRemoveLinks: true, 
    uploadMultiple: true, 
    parallelUploads: 100, 
    maxFiles: 100, 
    maxFilesize: 500, 
    paramName: "file", 
    init: function(){ 
     this.on("sendingmultiple", function(data, xhr, formData) { 
      formData.append("product_name", $(".product_name").serialize()); 
      formData.append("qty", $(".qty").serialize()); 
      formData.append("brand", $(".brand").serialize()); 
      formData.append("model", $(".model").serialize()); 
      formData.append("customer", $("#customer").val()); 
      formData.append("address", $("#address").val()); 
      formData.append("contact_number", $("#contact_number").val()); 
     }); 
     this.on("successmultiple", function(files, response) { 
      console.log('success sending') 
     }); 
     this.on("errormultiple", function(files, response) { 
      console.log('error sending') 
     }); 
    } 
}); 

$("#submit_btn").click(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    myDropzone.processQueue(); 
}); 

當我點擊提交按鈕，我得到了在控制檯說 $(...).processQueue is not a function

也是錯誤的，我在做正確的發送姓名陣列在我的後端？ 我用serialize()爲每個類..

Answer 1

你所得到的錯誤是因爲你需要移動processQueue()方法init函數內。至於其他也有一些小的失誤，像你的方式追加數組，這應該工作：

Dropzone.autoDiscover = false; 

var myDropzone = new Dropzone("div.file_upload", { 
    url: 'upload.php', 
    headers: { 
     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
    }, 
    autoProcessQueue: false, 
    addRemoveLinks: true, 
    uploadMultiple: true, 
    parallelUploads: 100, 
    maxFiles: 100, 
    maxFilesize: 500, 
    paramName: "file", 
    init: function(){ 

     $("#submit_btn").click(function(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      myDropzone.processQueue(); 
     }); 

     this.on("sendingmultiple", function(data, xhr, formData) { 
      $('.product_name').each(function(){ 
       formData.append("product_name[]", $(this).val()); 
      }); 
      $('.qty').each(function(){ 
       formData.append("qty[]", $(this).val()); 
      }); 
      $('.brand').each(function(){ 
       formData.append("brand[]", $(this).val()); 
      }); 
      $('.model').each(function(){ 
       formData.append("model[]", $(this).val()); 
      }); 
      formData.append("customer", $("#customer").val()); 
      formData.append("address", $("#address").val()); 
      formData.append("contact_number", $("#contact_number").val()); 
     }); 
     this.on("successmultiple", function(files, response) { 
      console.log('success sending') 
      console.log(response); 
     }); 
     this.on("errormultiple", function(files, response) { 
      console.log('error sending') 
     }); 
    } 
}); 

注意，在HTML你必須輸入類名是錯誤的。