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

您遇到的错误是因为您需要在 init 函数中移动 processQueue() 方法。对于其余部分，还有一些小错误，例如附加数组的方式，这应该可以：

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 中输入的类名是错误的。