Implement File Upload Feature with jQuery and AJAX

7 mins0
Implement File Upload Feature with jQuery and AJAX - Codewolfy

A rich, interactive user experience is what one expects from any modern web application. And, not least, that involves uploading files within the on-page experience without the jarring interruption of a full page refresh. This guide will walk you through how to implement File Upload Using jQuery and AJAX, giving your users a seamless and dynamic interface. You’ll have, by the end, a powerful feature that feels fast and responsive.

The following technique will be ideal for features such as updating a profile picture, attaching documents to a message, or submitting images to a gallery. We are going to cover everything from the basic HTML structure up to the server-side script that handles the file.

Setting Up the Basic HTML Form

First, we need a simple HTML form. This form will contain a file input field and a submit button. It’s the user-facing part of our feature. This for will have file upload field which will take user input for File and this file will be uploaded to server using jQuery and AJAX.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery AJAX File Upload</title>
</head>
<body>

    <form id="uploadForm" enctype="multipart/form-data">
        <label>Select File:</label>
        <input type="file" id="fileInput" name="file">
        <input type="submit" value="Upload">
    </form>

    <div id="status"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>

The enctype=”multipart/form-data” attribute in the tag. This attribute tells the browser that the form contains files, not just text data. We use the div with the status ID to display the upload status to the user.

The jQuery and AJAX Code for File Upload

Our HTML part is ready to use. We’ll use jQuery to intercept the form submission and send the file data via an AJAX call. We’ll use jQuery to intercept the form submission and send the file data via an AJAX call. It allows you to ajax upload file without refresh.

$(document).ready(function(){
    $("#uploadForm").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(response){
                $("#status").html(response);
            },
            error: function(){
                $("#status").html('Error: File could not be uploaded.');
            }
        });
    });
});

It will trigger AJAX upload when user selects file and submit form. Based on response of the form, it will print message to the user into our defined div element. The data option is set to new FormData(this), which creates a special object that gathers all the information from our form, including the file itself.

The contentType: false and processData: false settings are essential for a successful file upload. They instruct jQuery to not process the data or set the content-type header automatically.

Handling the File Upload with PHP (Backend)

The last thing for successful AJAX file upload is to create an backend to store file on server and return proper response to user. This script will be responsible for receiving the file, validating it, and moving it to a permanent location on the server.

Create new file called upload.php and enter below code to it.

<?php
if(isset($_FILES['file']['name'])){

   $filename = $_FILES['file']['name'];

   $location = "uploads/".$filename;
   $file_extension = pathinfo($location, PATHINFO_EXTENSION);
   $file_extension = strtolower($file_extension);

   $valid_extensions = array("jpg","jpeg","png");

   $response = 0;
   if(in_array($file_extension,$valid_extensions)){
      if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
         $response = $location;
      }
   }

   echo "File uploaded successfully at: " . $response;
   exit;
}

echo "No file was uploaded.";

It will take file from request and store it to uploads directory on back end. Here, you can see validation for images to files before moving or providing successful response.

Conclusion

You have just successfully created a slick, user-friendly file upload feature. By putting together a simple HTML form, the power of jQuery, and a server-side PHP script, users can now upload files without ever having to leave the page. This File Upload Using jQuery and AJAX approach thoroughly improves user experience and is one of the basic skills that every web developer should know. You can also use JavaScipt to get file extension.