upload file by ajax jquery , upload files with ajax , upload file with ajax jquery , upload files with ajax jquery


upload file with ajax jquery - bepractical.tech
upload file with ajax jquery

Hey developers , in this tutorial you will learn how to upload file using AJAX Jquery . Basically ajax is a method to send request in backend with reloading the whole page .

Storing an image file in backend requires an file input in html , some styling with css and if you want some animations you can use Javascript .

Jquery is a javascript library , it is mainly used for DOM and ajax is a jquery method used to send request in backend . In javascript ajax is known as xmlHttpRequest .


  • HTML
  • CSS
  • Jquery
  • PHP
  • Conclusion

Step 1 : HTML file

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Upload file</title>
    <div class="container">
        <div class="row d-flex justify-content-center align-items-center" >
            <div class="col-md-6 my-5 d-flex justify-content-start align-items-center flex-column" >
                <img src="" alt="" class = "mb-3 show_image" />
                <div class="file_upload">
                    <input type="file" name="file" id="fileInput">
                    <button class = "uploadButton" >Upload</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

In the above code block <img> tag is used to show the uploaded image file , and <input> tag is used to choose for image file to be uploaded .

Step 2 : CSS File

    border-radius: 10px;
    overflow: hidden;

Write the above code in a seprate css file and link it with the html file .

Step 3 : Jquery

Before writing jquey code , include jquery’s cdn link into your html file

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Then after write the below jquery code in <script> tag below jquery linkage into your html file.



            var fd = new FormData();
            var files = $('#fileInput')[0].files;
            // console.log(files);
            // Check file selected or not
            if(files.length > 0 ){

                    url: 'upload.php',
                    type: 'post',
                    data: fd,
                    success: function(response){
                            console.log('file not uploaded');
                alert("Please select a file.");

In the above jquery code we have used FormData() to upload file in backend . After successful uploading of file we are showing it into image tag .

Step 4 : PHP File

Now it’s time to handle the file upload in backend . Below code is a PHP code and it’s work is to move the uploaded file into upload directory in server .

Note : Make a folder named upload in the same directory of html file .



   $filename = $_FILES['file']['name'];
    $tmpName = $_FILES['file']['tmp_name'];
   $location = "upload/".$filename;

   $extension = pathinfo($location,PATHINFO_EXTENSION);
   $imgExtension = strtolower($extension);

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

   $response = 0;
   if(in_array(strtolower($imgExtension), $validExtensions)) {
            $response = $location;
   echo $response;

echo 0;


In the above code we have used FormData() object to store the selected file in an array and then with the help of ajax request we uploaded the file in backend .

Then with the help of PHP we checked that file must be a type of jpg , jpeg or png , after successful validation we have moved the file into upload folder stored in backend and echo the location of file .

When ajax request get a response of path of image then with the help of jquery we are modifing the value of src attribute of image tag to the path of image .

So that’s all for this aritcle guys . You can

Follow me on Linkedin : Anand Raj

Follow our Linkedin page : Be Practical

Join Our Telegram community over here

Checkout our latest course on udemy

battery status with javascript - bepractical.tech

Chat Application with Javascript , Jquery and Firebase

Rating : 4.8

2.5 Total Hours | 27 Lectures | Intermediate

Next Article : Easiest way to connect database with javascript : 3 simple steps

Thanks for reading ✌