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

Output

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 .

Contents

  • HTML
  • CSS
  • Jquery
  • PHP
  • Conclusion

Step 1 : HTML file 

<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
    <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>
                </div>
            </div>
        </div>
    </div>
<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>
</body>
</html>

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

.row{
    width:100%;
}
.col-md-6{
    width:500px;
    height:300px;
    border-radius: 10px;
    overflow: hidden;
}
img{
    width:95%;
    height:80%;
}

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.

$(document).ready(function(){

        $(".uploadButton").click(function(){

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

                $.ajax({
                    url: 'upload.php',
                    type: 'post',
                    data: fd,
                    success: function(response){
                        if(response){
                            $(".show_img").attr("src",response); 
                        }else{
                            console.log('file not uploaded');
                        }
                    },
                });
            }else{
                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 .

<?php

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

   $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)) {
        if(move_uploaded_file($tmpName,$location)){
            $response = $location;
        }
   }
   echo $response;
   exit;
}

echo 0;

Conclusion

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

Enroll Now

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

Thanks for reading ✌