DropzoneJS：上传文件并用名称数组提交表单 [英] DropzoneJS: upload files and submit form with array of names

问题描述

 < form>这是一个很长的复杂形式（我会简化它） 
<节> 
< input type =textname =customerid =customer> 
< input type =textname =addressid =address> 
< input type =textname =contact_numberid =contact_number> 
< / section> 
<节> 
< input type =textname =product_name []class =product_name> 
< input type =textname =qty []class =qty> 
< input type =textname =brand []class =brand> 
< input type =textname =model []class =model> 
 
< div class =file_upload>< / div> 
 
< button type =submitid =submit_btn>提交表单< / 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，$ b $ 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（））; 
f ormData.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不是一个函数

另外，我是否正确地发送名称数组我的后端？
我为每个类使用 serialize（）。

解决方案

你得到的错误是因为你需要在 init 函数中移动 processQueue（）方法。其余的还有一些小错误，比如你追加数组的方式，这应该是正常的：

  Dropzone.autoDiscover =假; 
 
 var myDropzone = new Dropzone（div.file_upload，{$ b $ 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（）{$ b （）; 
 e.stopPropagation（）; 
 myDropzone.processQueue（）; 
 $（ （），
}）; 
 
 this.on（sendingmultiple，function（data，xhr，formData）{
 $（'。product_name'）。each（function（） {
 formData.append（product_name []，$（this）.val（））; 
}）; 
 $（'。qty'）。 
 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中输入的类名是错误的。

So I have this long complex form (I'll just make it short)

 <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>

and I am using DropzoneJS for uploading files. the problem here is that I need to pass the form fields values especially the ones with the inputs with array of name attributes.

here's my JS code so far:

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

when i click the submit button I got an error in the console saying $(...).processQueue is not a function

also, am I doing it right on sending the name arrays on my backend?? I use serialize() for each class..

解决方案

The error you are getting is because you need to move the processQueue() method inside the init function. And for the rest there are some minor mistakes, like the way you append the arrays, this should work:

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

Note that the class names of the inputs you have in the html are wrong.

这篇关于DropzoneJS：上传文件并用名称数组提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！