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.

What exact issue are you facing? Please consider checking how to ask to improve your chances of getting answers — suvartheec
– suvartheec, Commented Jun 11, 2018 at 11:37
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. — Yash Parekh
– Yash Parekh, Commented Jun 11, 2018 at 11:42
Please consider adding this info and the exact error message that you might be getting, to the question, so that its visible to people who can help you — suvartheec
– suvartheec, Commented Jun 11, 2018 at 11:43

Sehdev · Accepted Answer · 2018-06-11 12:28:05Z

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)

edited Jun 11, 2018 at 12:28

answered Jun 11, 2018 at 12:17

Sehdev

5,7123 gold badges14 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yash Parekh Over a year ago

I have a hidden input in form named reason whose value is step17. The control is not going inside the if condition in line 3 of controller.php

Sehdev Over a year ago

Did you try data: new FormData($(this).parents('form')[0]); instead data: new FormData($(this).parents('form')),

Musa · Accepted Answer · 2018-06-11 12:49:47Z

1

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);
            }
        });   
});

answered Jun 11, 2018 at 12:49

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Collectives™ on Stack Overflow

Can't upload multiple files using ajax and php

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related