文件类型数据未进入进程页面

Question

我正在动态添加正在运行的文件类型，但是当我单击提交时，我在进程页面中只获得了第一个文件名。如何获取进程页面中的所有文件名？我尝试 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自动递增，你应该把索引放在里面[]而不是之后。

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

文件类型数据未进入进程页面

File type data not getting in the process page

javascript

php

html

jquery

jquery-validate