Upload File With Ajax Using PHP and jQuery

By Faruque Ahamed Mollick

In this post, we are going to see the simple process of uploading a file in PHP with AJAX. AJAX means, our page will not reload or refresh or don’t going to any other page. Here we are going to use jQuery for AJAX file upload in PHP.

We are going to build our simple AJAX file uploader step by step. In our uploader, we are going to allow only images to be uploaded and after upload complete, the image will be displayed on the same page without any page loading and refresh. All these will be done by jQuery AJAX.

Ajaxify Weather Forecast PHP Script Source Code

Easy to use PHP class to detect client location

At the end of the tutorial, you will get the download link to the source code.

Let’s first start with our HTML:

<input class="form-control" id="image" type="file" accept="image/*" />
<button id="upload">Upload</button>
<!-- After uploading the image it will be displayed below -->
<div id="result"></div>

In the above code, we have set a file input type field and a button. Also, we have taken a div element which will show the loading text while the uploading process running. After completing the upload, the uploaded image will be displayed in this element.

Now below is our JavaScript/jQuery code:



<script type="text/javascript">
    $('#upload').on('click', function() {
    var file_data = $('#image').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
                              
    $.ajax({
                url: 'process.php',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         
                type: 'post',
                beforeSend: function()
                {
                    $('#result').html("Loading...");
                },
                success: function(data){
                    $('#result').html(data);
                }
     });
});
</script>

The above code will call the process.php file. We have uses the onclick method so that after clicking the upload button, it will take the data from our file type input and send it via our AJAX post method to the “process.php” file.

The “process.php” file contains code that is given below:

<?php
if ( isset($_FILES['file']) ) {
    $tmp_name = $_FILES['file']['tmp_name'];
    // Set a unique name to prevent replacing of file
    $new_name = uniqid().$_FILES['file']['name'];
    // move the file to a directory
    move_uploaded_file( $tmp_name, 'tmp/'.$new_name );
?>
    <img src="<?php echo "tmp/".$new_name ; ?>" width="300px">
 <?php
  }
   else {
   // Show the message if no file has been chosen
   echo "<h3>No file has been chosen</h3>";
 }
 ?>

Now create a directory “tmp” in the root directory where our uploaded images will be moved.

That’s it. Now we can test our code. Run it on the server and test it by uploading an image. After you upload it will be displayed instantly. Also, you can check the “tmp” directory. In this directory, you will see your uploaded image.

Get country data by clicking on map – PHP source code

Get the current page URL in PHP

At the beginning of this tutorial, we told you that you will get the download link. Here is the download link to the code in the zipped format.

 

Leave a Reply

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