使用克隆的输入字段中的 jquery 上传多个文件

Question

我开发了一个动态 add/remove 输入类型文件来上传文件，它运行良好，我需要它来克隆相同的 ID 和名称，它正在这样做，问题是当我点击提交时按钮，它只存储第一个输入的文件而忽略其他的，甚至在控制台网络选项卡的 header 中只显示二进制格式的一个文件，我尝试搜索但没有运气，请指导我谢谢注意：没有使用多个属性，因为我希望一个字段一次只携带一个文件...

这是 html 的代码：

<div class="row margin-bottom">
  <div class="col-md-12 col-sm-12">
    <button type="button" class="add-box btn btn-info"><span class="glyphicon glyphicon-plus"></span> Add More Fields</button>
  </div>
</div>
<div class="form-horizontal">
  <div class="text-box form-group">
    <div class="col-sm-4"><input type="file" class="form-control" name="documents[]" id="documents"/></div>
  </div>
</div>

这是 add/remove 字段的代码：

<script type="text/javascript">
$(document).ready(function(){
  $('.add-box').click(function(){
    var n = $('.text-box').length + 1;
    if(n > 5) {
      alert('Only 5 Savy :D');
      return false;
    }
    var box_html = $('<div class="text-box form-group"><div class="col-sm-4"><input type="file" class="form-control" name="documents[]" id="documents" /></div><div class="col-sm-2"><button type="button" class="remove-box btn btn-danger btn-sm"><i class="fa fa-minus-circle fa-lg"></i></button></div></div>');
    $('.text-box:last').after(box_html);
    box_html.fadeIn('slow');
  });

  $('.form-horizontal').on('click', '.remove-box', function(){
    $(this).closest(".form-group").remove();
    return false;
  });
});
</script>

这是提交代码：

var getDocuments = document.getElementById('documents').files.length;
for (var x = 0; x < getDocuments; x++) {
  formData.append("documents[]", document.getElementById('documents').files[x]);
}

Answer 1

只想更新：在这里稍微改变了我的方法...

 jQuery.each(jQuery('input[name="documents[]"]'), function(i, value) 
{
    formData.append('documents['+i+']', value.files[0]);
});

对我有用谢谢

Answer 2

最好是这样...

已将 #document 更改为 .documents...然后您必须循环所有 .documents 并将文件收集到一个数组中...这将发生在 FormData 中。

$(document).ready(function() {
  $('.add-box').click(function() {
    var n = $('.text-box').length + 1;
    if (n > 5) {
      alert('Only 5 Savy :D');
      return false;
    }
    var box_html = $('<div class="text-box form-group"><div class="col-sm-4"><input type="file" class="form-control documents" name="documents[]" /></div><div class="col-sm-2"><button type="button" class="remove-box btn btn-danger btn-sm"><i class="fa fa-minus-circle fa-lg"></i></button></div></div>');
    $('.text-box:last').after(box_html);
    box_html.fadeIn('slow');
  });

  $('.form-horizontal').on('click', '.remove-box', function() {
    $(this).closest(".form-group").remove();
    return false;
  });
});

$("form").on("submit", function(e) {

  e.preventDefault()
  let formData = new FormData()
  
  // get all file object in an array
  let files = []
  $('.documents').each(function() {
    files.push(this.files[0])
    console.log(this.files[0].name)
  })

  // Append the array to the FormData
  formData.append("documents[]", files);
  
  console.log("FORMDATA:",formData.get("documents[]"))
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<form>
  <div class="row margin-bottom">
    <div class="col-md-12 col-sm-12">
      <button type="button" class="add-box btn btn-info"><span class="glyphicon glyphicon-plus"></span> Add More Fields</button>
    </div>
  </div>
  <div class="form-horizontal">
    <div class="text-box form-group">
      <div class="col-sm-4"><input type="file" class="form-control documents" name="documents[]" /></div>
    </div>
  </div>
  <button>Submit</button>
</form>

使用克隆的输入字段中的 jquery 上传多个文件

Uploading multiple files using jquery from cloned input fields

jquery

multipartform-data