如何解决jQuery+HTML多组文件与文本批量上传仅传单个的问题？

我看了你的代码，问题出在几个关键地方，都是因为重复使用id导致只能获取第一个元素，以及提交时没有遍历所有动态生成的输入框。下面是具体的修改方案：

问题根源 #

1. 所有动态生成的文件输入框和资格证文本框都用了相同的id（myfiles和qualification），而document.getElementById()只会返回匹配的第一个元素，所以你只能拿到第一个文件和第一个文本值。
2. AJAX提交逻辑里只收集了第一个文件框的文件，没有遍历所有动态添加的输入框，自然没法上传多个文件。

修改后的完整代码 #

1. HTML部分（移除重复ID，改用类名）

<div style="margin-bottom: 25px" class="input-group input_fields_wrap">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input type="text" class="form-control qualification-input" placeholder="Qualification" name="qualification[]"/>
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input type="file" name="myfiles[]" class="file-input">
  <img class="add_field_button" src="images/plus.png" width="40" height="40"/>
  <input type="submit" name="submit" id="submit" value="SUBMIT" />
</div>
<div id="loadedfiles"></div>

2. JavaScript部分（遍历所有输入框，收集所有文件和文本）

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".input_fields_wrap");
  var add_button = $(".add_field_button");
  var x = 1;

  $(add_button).click(function(e){
    e.preventDefault();
    if(x < max_fields){
      x++;
      // 动态添加的元素用类名，避免重复ID
      $(wrapper).append('<div><input type="text" placeholder="Qualification" class="qualification-input" name="qualification[]"/><input type="file" name="myfiles[]" class="file-input"><img class="remove_field" src="images/minus.png" width="30" height="30"/></div>');
    }
  });

  $(wrapper).on("click",".remove_field", function(e){
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });

  $('#submit').on("click", function(e) {
    e.preventDefault(); // 阻止表单默认提交，防止页面刷新
    var data = new FormData();

    // 遍历所有文件输入框，收集每个文件和对应的资格证文本
    $(".file-input").each(function(index) {
      var file = this.files[0];
      if (file) {
        // 以数组形式添加文件，和input的name属性对应
        data.append('myfiles[]', file);
        // 获取当前文件框相邻的资格证输入框的值
        var qualification = $(this).siblings('.qualification-input').val();
        data.append('qualification[]', qualification);
      }
    });

    $.ajax({
      url: 'load.php',
      type: 'POST',
      contentType: false,
      data: data,
      processData: false,
      cache: false
    }).done(function(msg) {
      $("#loadedfiles").append(msg);
    });
  });
});

3. PHP部分（处理数组形式的文件和文本，一一对应）

<?php
$path = "myfiles/";
// 确保有文件和文本数据提交
if(isset($_FILES['myfiles']) && isset($_POST['qualification'])){
  $files = $_FILES['myfiles'];
  $qualifications = $_POST['qualification'];
  
  // 遍历文件数组，每个索引对应一个文件和它的资格证文本
  foreach($files['name'] as $index => $name){
    if($files['error'][$index] == UPLOAD_ERR_OK){
      $temp = $files['tmp_name'][$index];
      $size = ($files['size'][$index] / 1000) . "Kb";
      $qualification = $qualifications[$index];
      
      move_uploaded_file($temp, $path . $name);
      echo "
      <div>
        <h12><strong>Qualification: $qualification</strong></h12><br />
        <h12><strong>File Name: $name</strong></h12><br />
        <h12><strong>Size: $size</strong></h12><br />
        <hr>
      </div>
      ";
    }else{
      echo "Error uploading file at position $index: " . $files['error'][$index];
    }
  }
}else{
  echo "No files or qualifications were submitted.";
}
?>

关键修改说明 #

• 唯一DOM元素：把重复的id替换成类名，这样可以通过类选择器获取所有动态生成的输入框，而不是只拿到第一个。
• 全量数据收集：提交时遍历所有文件输入框，同时获取每个文件对应的资格证文本，以数组形式添加到FormData中，保证前后端数据的对应关系。
• 后端数组处理：PHP中直接处理多文件上传的标准数组结构$_FILES['myfiles']，并通过索引对应$_POST['qualification']数组，实现文件和文本的一一匹配。

内容的提问来源于stack exchange，提问作者Kalai Shruthi