Ajax FormData using POST type but in PHP file no request can be fetched

Question

I am unable to figure out the problem .I apology in advance if I have lack of knowledge and did silly mistakes. Here is my piece of code.

    <!-- Piece of html -->
    <div class="form-group">
    <input class="form-control" placeholder="Enter Service image" id="edit_service_image-1" type="file" name="file_image">
    </div>
    <button type="button" class="btn btn-primary" onclick="processIt(<?php echo $service['service_id'];?>,'esi',document.getElementById('edit_service_image-1').files[0])">Edit</button>

The javascript function :->

    function processIt(id,flag,inputvalue)
    {

         var filedata = new FormData();
         filedata.append('imagefile', inputvalue);
         filedata.append('id', id);
         filedata.append('flag', flag);
         $.ajax({
                    url: 'modify.php',
                    type: 'POST',
                    inputvalue: filedata,
                    contentType: false,
                    processData: false,
                    cache: false
                }).success(function(msg) {
                    alert(msg);
                });


    }

Here is modify.php (Only test code)

    <?php
      if(isset($_REQUEST['flag']) && !empty($_REQUEST['flag']) && isset($_REQUEST['id']) && !empty($_REQUEST['id']) )
        {
         $flag = $_REQUEST['flag'];
         $id = $_REQUEST['id'];
         echo "Processed";
        }
       else
        echo "Request not processed";
    ?>

So my problem is its always alerting "Request Not Processed", which means nothing is getting posted using ajax POST . I am confused, couldn't figure out the exact problem.

Edit

Another test code of modify.php

     <?php
        print_r($_FILES);
        print_r($_POST);
     ?>

In this case the output is -->

    Array{

    }
    Array{

    }

SOLVED

Thanks to everybody who guided me Just a change in javascript worked . Here's the following changed code in processIt() function, which served my purpose->

 function processIt(id,flag,inputvalue)
    {

         var filedata = new FormData();
         filedata.append('imagefile', inputvalue);
         filedata.append('id', id);
         filedata.append('flag', flag);
         $.ajax({
                    url: 'modify.php',
                    type: 'POST',
                    data: filedata, // Here instead of inputvalue it's changed to data
                    contentType: false,
                    processData: false,
                    cache: false
                }).success(function(msg) {
                    alert(msg);
                });


    }

Answer 1

I am basing my answer off this answer . Not sure where you got inputvalue from, but replace it with data .

function processIt(id, flag, inputvalue)
{
     var data = new FormData();
     data.append('imagefile', inputvalue);
     data.append('id', id);
     data.append('flag', flag);

     $.ajax({
        url: 'modify.php',
        type: 'POST',
        data: data,
        contentType: false,
        processData: false,
        cache: false,
        success: function (msg) {
            alert(msg);
        }
     });
}

And just a friendly code review in your PHP code, avoid using $_REQUEST and you are doing too much unnecessary checking in your IF condition. Here's one way to fix it:

if (!empty($_POST['flag']) && !empty($_POST['id'])) {
    $flag = $_POST['flag'];
    $id = $_POST['id'];
    echo "Processed";
} else {
    echo "Request not processed";
}

You may also try filter_input function which offers some validation and sanitization features. Unfortunately, there is no INPUT_FILE and you have to use $_FILES array.

Assuming id is an integer, you could do something like:

$flag = filter_input(INPUT_POST, 'flag', FILTER_SANITIZE_STRING);
$id = filter_input(INPUT_POST, 'id', FILTER_VALIDATE_INT);
if ($flag && $id) {
   echo "Processed";
} else {
   echo "Request not processed";
}

Answer 2

I have no idea how did you get this option: inputvalue: but this will do:

function processIt(id,flag,inputvalue){

    $.ajax({
                    url: 'modify.php',
                    type: 'POST',
                    data: {inputvalue:'imagefile',id:id, flag:flag},
                    contentType: false,
                    processData: false,
                    cache: false,
                    success: function(msg) {
                       alert(msg);

                      }

                });


    }

Answer 3

You need to replace your "inputvalue" with "data".

So your code will look more like this:

function processIt(id,flag,inputvalue)
{

     var filedata = new FormData();
     filedata.append('imagefile', inputvalue);
     filedata.append('id', id);
     filedata.append('flag', flag);
     $.ajax({
                url: 'modify.php',
                type: 'POST',
                data: { mydata: filedata },
                contentType: false,
                processData: false,
                cache: false
            }).success(function(msg) {
                alert(msg);
            });
}

And then in your modify.php do:

var_dump($_POST);

To see if the post data is accessable.