File type data not getting in the process page

问题

I am adding the file type dynamically which is working but when I click on submit then I am getting only the first filename in the process page. how to get all the file name in process page? I tried var_dump($_FILES) to check but it is displaying only the first file name.

then I notice that if I remove numberIncr from the name ( name="workpic[]' + numberIncr + '" ) then it's working but my validation not working.

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>

Can anyone help me out with this issue?

I am getting this output but I added 3 images and it's displaying only one.

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

Would you help me out in this issue?

回答1:

You shouldn't put numberIncr after name=workpic[]. Using a name ending in [] will automatically make it an array in PHP. So just do:

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

If you need to give specific indexes, rather than letting them automatically increment from 0, you should put the index inside the [] rather than after it.

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

回答2:

I inspected the form data being send when there are multiple input type="file" added with following code

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

Here's the structure

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

Based on that you can access files following way

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

Or

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

来源：https://stackoverflow.com/questions/61873049/file-type-data-not-getting-in-the-process-page