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

DropzoneJS：上传文件并提交包含名称数组的表单

1 个答案: