How to File upload using AJAX, jQuery, and PHP

In this tutorial, we will learn How to Upload a File using Ajax, jQuery, and PHP with an example.

File upload using Ajax, jQuery, and PHP



Creating a index.htmlfile.

Create a one file type element for select a file and a button. Triggers AJAX call by click on a button.

<div class="form-group">
	<label for="file" class="text-info">Select file:</label><br>
	<input type="file" id="file-upload" name="uploadedFile" class="form-control">
<div class="form-group submit_div"> 
	<button id="upload" class="btn  btn-info btn-md">Upload</button>
<div class="form-group"> 
	<span class="message"></span>


Create a FormData object and append files[0] to 'file' key in form_data.

Call an AJAX request where we pass the form_data object as data and on successful callback check the response is 1 or not and show message according response in <span class="message"> tag.

<script type="text/javascript">
	$('#upload').on('click', function(e) {
	  var file = $('#file-upload').prop('files')[0]; //get file by id   
	  var form_data = new FormData();                  
	  form_data.append('file', file);    // append file data                                  
	        url: 'ajaxfile.php', // <-- point to server-side PHP script 
	        dataType: 'text', 
	        cache: false,
	        contentType: false,
	        processData: false,
	        data: form_data,                         
	        type: 'post',
	        success: function(response){
	           if (response==1) {   
	                 $('.message').text('file uploaded');                                     
	              }else if(response==2){
	                $('.message').text('file not upload'); 
	                 $('.message').text('Please select Valid file extensions');                        


Create an ajaxfile.php file and upload folder to store files.

Read file extension and Initialized valid$valid_extensions Array.

Check if upload file extension exists in $valid_extensions Array or not. If exists then upload a file.

Return $responsevariable.

if(isset($_FILES['file']['name']) ){  
    // file name
    $filename = $_FILES['file']['name'];  
    // Location
    $uploadlocation = 'upload/'.$filename;
    // get file extension
    $file_extension = pathinfo($uploadlocation, PATHINFO_EXTENSION);
    $file_extension = strtolower($file_extension);
    // Valid file extensions
    $valid_ext = array("pdf","doc","docx","jpg","png","jpeg","xls");
    $response = 0;
          // Upload file
            // if file upload then return 1.
            $response = 1;
            // if file not upload then return 2.
              $response = 2;
         // if file not Valid file extensions then return 2.
           $response = 0;
      return $response;


Download source code

One Comment

  1. Raul Bollom said:

    Good post. I learn something totally new and challenging on blogs I stumbleupon every day. It will always be useful to read content from other writers and use something from other web sites.

    February 21, 2022

Leave a Reply

Your email address will not be published.