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

Posted 2023-05-09

【中文标题】DropzoneJS：上传文件并提交带有名称数组的表单

【英文标题】：DropzoneJS: upload files and submit form with array of names

【发布时间】：2017-05-10 17:36:29

【问题描述】：

所以我有这个很长的复杂形式（我会缩短它）

 <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()..

【问题讨论】：

为什么这个输入需要是一个数组？

这是一个要发送到服务器的产品数组。然后文件上传是来自用户的支持文档，例如ID，订单等。

但是现在每次上传的每种类型都只有一个输入，即使您上传了多个图像。

【参考方案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 中输入的类名是错误的。

【讨论】：

@KimCarlo html 中的其他输入在哪里？

@KimCarlo 刚刚为输入添加了一个循环。