How to upload files asynchronously using jQuery?

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
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?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;
       }
    }
    ?>

    chevron_right

    
    

  • HTML File:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
            Async file upload with jQuery
        </title>
          
        <script src=
        </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>

    chevron_right

    
    

Output:
upload image file



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.