How to upload files asynchronously using jQuery?

Last Updated : 03 Aug, 2021

To upload files from local machine to the server is called file uploading. It works exactly the same as the definition, when we select file from the browser and click submit button, the browser takes file from local machine and submit it to the server and server does its job to save the file to the defined path. Here use ajax and jQuery to upload a file asynchronously. Used Function:

FormData(): It creates a new FormData object.
FormData.append(): It appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.
move_uploaded_file(): It moves an uploaded file to a new location.

Steps to run the Program:

Create a folder upload in the xampp/htdocs directory.
Copy and edit the html/jQuery code as per requirement.
Create a file upload.php and copy the php code given below.
Start the Apache server and open the html file using browser.
Select any text or image file and click on Upload button.
The file will be uploaded to the "upload" folder in xamp/htdocs.
If the file is an image, it will be displayed as well, if not an image file then "Uploaded file does not have an image" message will be displayed instead.

Example:

upload.php

php

<?php

/* Getting file name */
$filename = $_FILES['file']['name'];

/* Location */
$location = "upload/".$filename;
$uploadOk = 1;

if($uploadOk == 0){
   echo 0;
}else{
   /* Upload file */
   if(move_uploaded_file($_FILES['file']['tmp_name'], $location)){
      echo $location;
   }else{
      echo 0;
   }
}
?>

HTML File:

html

<!DOCTYPE html>
<html>
<head>
    <title>
        Async file upload with jQuery
    </title>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>

<body>
    <div align="center">
        <form method="post" action="" enctype="multipart/form-data"
                id="myform">
 
            <div >
                <input type="file" id="file" name="file" />
                <input type="button" class="button" value="Upload"
                        id="but_upload">
            </div>
        </form>
    </div>    
     
    <script type="text/javascript">
        $(document).ready(function() {
            $("#but_upload").click(function() {
                var fd = new FormData();
                var files = $('#file')[0].files[0];
                fd.append('file', files);
     
                $.ajax({
                    url: 'upload.php',
                    type: 'post',
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: function(response){
                        if(response != 0){
                           alert('file uploaded');
                        }
                        else{
                            alert('file not uploaded');
                        }
                    },
                });
            });
        });
    </script>
</body>

</html>

Output: upload image file

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.