How to upload multiple files one by one

Question

I need to upload a lot of images at once (e.g. 200 small images) through the browser. I have this code:

<?php
if(isset($_POST['Upload_files']) and $_SERVER['REQUEST_METHOD'] == "POST"){

  echo count($_FILES['files']['name']); // Even if I upload more than 20 files, it still displays 20.

  $target_directory = "upload/";  
  foreach ($_FILES['files']['name'] as $file_number => $file_name) {
    $file = $_FILES["files"]["tmp_name"][$file_number];
    if (mime_content_type($file) != 'image/png' && mime_content_type($file) != 'image/jpeg')
      { $error[] = 'File '.$file_name.' is not in JPG / PNG format!'; continue; }
    else
      { if(move_uploaded_file($file, $target_directory.$file_name)) {$count_of_upload_file++;}}
  }
}

// If files were uploaded 
if($count_of_upload_file != 0){echo 'Your files ('.$count_of_upload_file.' ) were successfully uploaded.';}

// If there was an error
if (isset($error)) {foreach ($error as $display_error) {echo '- '.$display_error.'<br />';}}
?>

<form action="" method="post" enctype="multipart/form-data">
      <input type="file" name="files[]" multiple="multiple" accept="image/*">
      <input type="submit" name="Upload_files" value="Upload files">
</form>   

And it works. However my provider set the 'max_file_uploads' to 20 (and I'm not able to change it). (The Uploadify extension is working for more than 20 files, but I'd like to have my own small solution.) So I presume I need to add here something, which instead of 200 files at once uploads 200 files one by one (or twenty by twenty). But I don't know how to do it. (To use AJAX? -- I never used it, so I really don't know.) Thank you!

Answer 1

If you don't want to use ajax, you need a loop to receive files

for($i = 0; $i < count($_FILES['files']['tmp_name']); $i++){
    $tmp = $_FILES['files']['tmp_name'][$i];
    $name = md5(microtime());

 if(move_uploaded_file($tmp, "dir/$name.jpg")){
    echo "Uploaded successfully";
 }else{
    echo "failed";
 }
}

In your form you must name all your input fields as files[], example:

<form action="" method="post" enctype="multipart/form-data">
      <input type="file" name="files[]" multiple="multiple" accept="image/*">
      <input type="file" name="files[]" multiple="multiple" accept="image/*">
      <input type="file" name="files[]" multiple="multiple" accept="image/*">
      <input type="submit" name="Upload_files" value="Upload files">
</form>

Or if you want to use ajax here is an example: Upload multiple image using AJAX, PHP and jQuery