文件类型数据未进入处理页面

Question

我正在动态添加正在运行的文件类型，但是当我单击Submit时，我仅获得过程页面中的第一个文件名。如何获取进程页面中的所有文件名？我尝试了var_dump($_FILES)进行检查，但它仅显示第一个文件名。

然后我注意到，如果我从名称（name="workpic[]' + numberIncr + '"）中删除numberIncr，则该代码有效，但我的验证无效。

Process.php

if(isset($_FILES)){
echo"<pre>";
//var_dump($_FILES) ;
print_r($_FILES['workpic']['name']);

    foreach($_FILES['workpic']['name'] as $key=>$val){
    $fileName = basename($_FILES['workpic']['name'][$key]); 
     print_r($fileName);
        }
}

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  //var count = 2;
  var numberIncr = 1; // used to increment the name for the inputs
  // var addrm = '';

  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    //Check maximum number of input fields
    if (x < maxField) {
      $(".medication_info").append(' <input type="file" name="workpic[]' + numberIncr + '" class="dynamicVal"><br />');
      x++; //Increment field counter
      numberIncr++;
    }
    // count++;

  });


});

$('#register').on('submit', function(event) {
  event.preventDefault();
  // adding rules for inputs with class 'comment'
  $('.dynamicVal').each(function() {
    $(this).rules("add", {
      required: true
    })
  });
  // test if form is valid 
  if ($('#register').validate().form()) {
    var formData = new FormData(this);
    $.ajax({
      //url:"process.php",
      url: "process2.php",
      type: "POST",
      dataType: "json",
      data: formData,
      contentType: false,
      cache: false,
      processData: false,

      success: function(data) {
        alert("success");
      },
    }); // AJAX Get Jquery statment
  }
  //alert('hellow');
});

$('#register').validate({
  errorPlacement: function(error, element) {
    if (element.is("select")) {
      error.insertAfter(element.parent());
    } else {
      error.insertAfter(element);
    }

  }
});

<div id="clicktoadd"><a href="javascript:void(0);" class="btn btn-bg">Add More</a></div>
<form action="#" method="post" id="register" name="register" enctype="multipart/form-data">
  <div class="row">
    <div class="medication_info">
      <input type="file" name="workpic[]" class="dynamicVal"><br />
    </div>
  </div>

  <input type="submit" name="send" value="submit">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>

谁能帮我解决这个问题？

我得到此输出，但是我添加了3张图像，并且只显示了一张。

Array
(
    [0] =>bTml75QAfHo-unsplash.jpg
)

您能帮我解决这个问题吗？

Answer 1

[我检查了当发送带有以下代码的多个input type="file"时发送的表单数据

var formData = new FormData(this);
console.log([...formData.entries()]);

这里是结构

[
  [
    "workpic[]",
    {
      ...
    }
  ],
  [
    "workpic[]1",
    {
      ...
    }
  ],
  [
    "workpic[]2",
    {
      ...
    }
  ]
]

基于此，您可以通过以下方式访问文件

print_r($_FILES['workpic[]']['name']);
print_r($_FILES['workpic[]1']['name']);
print_r($_FILES['workpic[]2']['name']);

或

foreach($_FILES as $file){
  echo $file['name']; 
}

Answer 2

您不应该在numberIncr之后加上name=workpic[]。使用以[]结尾的名称将自动使其成为PHP中的数组。所以就做：

      $(".medication_info").append(' <input type="file" name="workpic[]" class="dynamicVal"><br />');

如果需要提供特定的索引，而不是让它们从0开始自动增加，则应将索引inside放在[]而不是后面。

      $(".medication_info").append(' <input type="file" name="workpic[' + numberIncr + ']" class="dynamicVal"><br />');