Can't upload multiple files using ajax and php

Question

I'm trying to upload multiple files using jquery and PHP. But my form data is not being submitted as required to the PHP page. Please, can someone help me out writing the correct way of uploading files?

Below is my code:

index.php:

<form id="step17Form" action="" name="step17Form" method="post" enctype="multipart/form-data">
    <div style="text-align :left; margin-left:15px"> <label><big>
                (<span style="color: red; font-family: Comic Sans MS;"><small style="font-weight: bold;">Note: Max File Size - 75KB</small></span>)</big></label>
        <br><br>
        <table style="text-align: centre; width: 800px; margin-left:15px" border="0" id="upload" cellpadding="6" cellspacing="6">
            <tbody>
                <tr>
                    <td><br><label for="stuphoto"><span style="font-family: Comic Sans MS;">1. Student Photo</label></span>
                    </td>
                    <td><br><input id="file-upload" name="stuphoto" type="file" accept=".JPG" class="custom-file-upload" style="display: inline;"></td>
                </tr>

                <tr>
                    <td><br><label for="stuadhar"><span style="font-family: Comic Sans MS;">2. Aadhar Card</label></span>
                    </td>
                    <td><br><input name="stuadhar" accept=".jpg,.pdf" class="custom-file-upload" type="file" style="display: inline;"></td>
                </tr>                                  
            </tbody>
        </table>
    </div>
    <br>
    <input type="hidden" name="reason" value="step17" />
    <button type="submit" id="upload_save" class="btn btn-success"> Save And Next >></button>
</form>

JS:

$('#upload_save').click(function(){
            event.preventDefault();        

            $.ajax({
                url: 'controller.php',
                type: 'post',
                dataType: 'json',
                data: new FormData($(this).parents('form')),
                processData: false,
                contentType: false,
                success: function(suc){
                    alert(suc['msg']);
                },
                error: function(error){
                    alert(error);
                }
            });   
    });

controller.php:

     $reason = $_POST['reason'];
        var_dump($_FILES);
if ($reason === "step17" ) {
        var_dump($_FILES);
        $status=array();
        $uploaded_file=array();
        $document_type=array("Photo","Aadhar");
        $i=0;
        $j=0;
       foreach($_FILES as $key=>$file)
       {

          $status= uploadImage($key, $file_size=5000000, "../..".FILE_PATH_LOC );
          if($status['error']!==200 && $status['status']===false )
          {
            echo json_encode(array('status'=>'false','msg'=>"Error  ".$file['name']." ".$status['msg']));  
              break;
          }
       }
    }

Output of var_dump($_FILES): array(0){ } The issue I'm facing here is that the data I post is not being recognized in controller.php and control doesn't reach inside the if condition.

Answer 1

You need to make stuphoto as an array. Sor please try to change this line

 <td><br><input id="file-upload" name="stuphoto" type="file" accept=".JPG" class="custom-file-upload" style="display: inline;"></td>

To

<td><br><input id="file-upload" name="stuphoto[]" type="file" accept=".JPG" class="custom-file-upload" style="display: inline;"></td>

and

foreach($_FILES as $key=>$file)

to

foreach($_FILES['stuphoto']['name'] as $key=>$file)

Answer 2

Your problem is that you are passing a jQuery object as the parameter to the FormData constructor when it takes an html form

$('#upload_save').click(function(event){
        event.preventDefault();        

        $.ajax({
            url: 'controller.php',
            type: 'post',
            dataType: 'json',
            data: new FormData(this.form), // pass the form itself to the constructor
            processData: false,
            contentType: false,
            success: function(suc){
                alert(suc['msg']);
            },
            error: function(error){
                alert(error);
            }
        });   
});