Javascript, LAMP, Web DevelopmentAjax File Upload without iframe

Ajax File Upload without iframe

The Invisible I-frame File Upload method works in almost all browsers.

This post explains using FormData to submit forms that is supported by most new browsers.

if( isset($_POST) && ! empty($_POST) ) {
     $file = $_FILES['myfile'];
     $output ="Response From the Server\n";
     $output .= "myInput = ".$_POST['myInput'];
     $output .= "\n".'File Name: '.$file['name'];
     $output .= "\n".'File Type: '.$file['type'];
     $output .= "\n".'File Size: '.$file['size'];
     $output .= "\n".'File Tmp Name: '.$file['tmp_name'];
     echo $output;

     <script src="//"></script>
     <script type="text/javascript">

          * when the file is selected 
          $("#myfile").change(function() {

               var file = $('#myfile')[0].files[0];

               // new form data 
               var formData = new FormData();
               formData.append('myfile', file); // add the file details
               formData.append('myInput', "Hello World"); // add other data as required
               // make an ajax post request 
                   url: '/test/file.php',
                   type: 'POST',
                   data: formData,
                   processData: false, // this has to be set to false
                   contentType: false, // this has to be set to false
                   error: function(jqXHR, textStatus, errorThrown){
                   success: function(data) {
    <input type="file" name="myfile" id="myfile">

Categories: Javascript, LAMP, Web Development


No Comments Yet. Be the first?

Post a comment

Your email address will not be published. Required fields are marked *