如何获取附加了 Jquery Multifield 插件的多个下拉列表和文件上传的值

Question

我正在尝试使用 jquery 获取多个选择框和文件输入的值。 我使用Jquery Multifield plugin 多次附加相同的字段。到目前为止，我无法获取所有值，因为我使用 jquery 和 ajax 发布这些输入。

---

$('.myFlag').on('change', function () {

      var flagID = $(".myFlag option:selected").val();
alert(flagID);
});
$('#submit').on('click', function () {
var flag_attach = $('.InputFile')[0].files[0].name;
alert(flag_attach);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example-6">
            <div class="row group" >
                <div class="col-md-1"></div>
                <div class="col-md-3">

                    <div class="form-group">
                        <label>Choose Flag Type</label>
                        <select class="form-control myFlag" name="flag_name[]">
                            <option value="">Select Flag</option>
                                <option value="1">A</option>
                                 <option value="2">B</option>
                                  <option value="3">C</option>
                        </select>
                        <select class="form-control myFlag" name="flag_name[]">
                            <option value="">Select Flag</option>
                                <option value="1">A</option>
                                 <option value="2">B</option>
                                  <option value="3">C</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-3" >
                    <div class="form-group">
                        <label for="exampleInputFile">Upload Flag</label>
                        <div class="input-group">

                            <input type="file" class="custom-file-input InputFile" name="flag_attach[]" id="InputFile" accept="application/pdf">
                            <label class="custom-file-label" for="exampleInputFile">Choose file</label>
<label for="exampleInputFile">Upload Flag</label>
                        <div class="input-group">

                            <input type="file" class="custom-file-input InputFile" name="flag_attach[]"  accept="application/pdf">
                            <label class="custom-file-label" for="exampleInputFile">Choose file</label>

                        </div>
                    </div>
                </div>
               
            </div>
                
                <!-- <div class="col-md-2"></div> --> 
            <!-- </div> -->
           </div>
           <button type="button" id="submit">submit </button>

Answer 1

在启用 jquery-multifield 插件的情况下检查下面的 sn-p。在这里您可以添加文件并在提交时，可以在控制台中看到填充的数据。请使用浏览器控制台以获得清晰的视图。

这里表单数据赋值给_form变量，你需要把这个变量发送到服务器。

$('.myFlag').on('change', function() {
  var flagID = $(this).val();
});
$('#myForm').on('submit', function() {
  var _form = new FormData(this);// get the form object values. Send this variable to ajax call.
  for (var value of _form.values()) {
    console.log(value); // shows each form values. here you can see the file name etc...
  }
});
$('#example-6').multifield({
  section: '.section',
  btnAdd: '.btnAdd',
  btnRemove: '.btnRemove'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://maxkostinevich.github.io/jquery-multifield/jquery.multifield.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form id="myForm" enctype="multipart/form-data">
    <div id="example-6">
      <div class="row group">
        <div class="col-md-1">
          <button type="button" class="btn btn-primary btnAdd">Add</button>
        </div>
        <div class="section">
          <div class="col-md-3">
            <div class="form-group">
              <label>Choose Flag Type</label>
              <select class="form-control myFlag" name="flag_name[]">
                <option value="">Select Flag</option>
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">C</option>
              </select>
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label for="exampleInputFile">Upload Flag</label>
              <div class="input-group">
                <input type="file" class="custom-file-input InputFile" name="flag_attach[]" accept="application/pdf">
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <button class="btn btn-danger btnRemove" type="button">Remove</button>
          </div>
        </div>
      </div>
    </div>
    <button type="submit" id="submit" class="btn btn-primary">submit </button>
  </form>
</div>