send input type file value with ajax [duplicate]

Question

i have made a form that will be send a input type file, in my server side i want to get $_FILES value so i used print_r($_FILES), but in my ajax response i don't get anything value, here my code..

  <form id="my_form">
     <input type="file" id="image_file" name="image_file"/>
  </form>

  $('#my_form').submit(function() {
     var data   = $('#my_form').serialize();
     $.ajax({
        url: 'ajax.php',
        type: 'POST',
        data: data,
        enctype: 'multipart/form-data',
        success: function(response) {
            alert(response);
        }, 
    });
  return false;
});

and here my php code

<?php  
  $name = $_FILES['image_file']['name']; // get the name of the file
  $type = $_FILES['image_file']['type']; // get the type of the file
  $size = $_FILES['image_file']['size'];
  echo $name;
  //or
  print_r($_FILES);
?>

please help me ...

thanks..

Answer 1

AjaxFileUpload

Maybe this plugin could help you fix the problem.

The way of this plugin doing is just like the way people did before ajax theory proposed which is using an iframe tag handle all the request without refreshing the page.

Without HTML5,I don't think we can use XMLHttpRequest to upload file.