PHP upload file to Ajax using onchange

Question

function chkFile(file1) {
    var file = file1.files[0];
    var formData = new FormData();
    formData.append('formData', file);

    $.ajax({
    type: "POST",
    url: "chkFileType.php",    
    contentType: false,
    processData: false,
    data: formData,
    success: function (data) {
      alert(data);
      }
  });
}


<form action="" method="post" name="myForm" id="myForm" enctype="multipart/form-data">

<input type="hidden" name="MAX_FILE_SIZE" value="30000" />

Upload Files
<input type="file" name="uploadFile" id="uploadFile" onChange="chkFile(this)"/>

<input type="submit" name="submitbutt" value="Checkout">

chkFileType.php

<?php 
    print_r($_FILE)
?>

I want to create a form that when the user uploads a file, it will do a check on the uploaded file before submitting the whole form. I use onChange when a file is uploaded and then pass the formData value to Ajax to call my chkFileType.php to do the checks and alert back the response.

The function is running without any errors, but no response from alert(data);

I know I am doing something wrong, but have no idea which direction to go from. Am I doing the right way?

Answer 1

Everything looks fine. You have done in right way. But to get any response from an ajax call, you have to print the required stuff in chkFileType.php.

Like,

if($ext =="jpg" || $ext == "png"){
     echo "Image"; // data in alert will alert as Image
} else if(check for txt file){
     echo "Text File"; //  data in alert will alert as Text File
} else if(chck for pdf) {
     echo "Pdf";// data in alert will alert as Pdf  
}

EDIT change this

var formData = new FormData( $("#formID")[0] );

Hope you understand what i meant to say.