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

도 말 콘솔에 오류가있어 버튼을 제출 내 백엔드에 ?? 당신이 init 기능 내부의 processQueue() 방법을 이동해야하기 때문에 내가

Answer 1

당신이 점점 오류입니다 .. 각 클래스에 대한 serialize() 사용합니다. 그리고 나머지는 배열을 추가하는 방식처럼,이 일을해야, 약간의 실수가 있습니다 : html로에서 당신이 가지고있는 입력의 클래스 이름이 잘못 것을

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') 
     }); 
    } 
}); 

참고.