Skip to content
Related Articles

Related Articles

How to upload files asynchronously using jQuery?
  • Last Updated : 28 Mar, 2019

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
      
    /* 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:




    <!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>

Output:
upload image file




My Personal Notes arrow_drop_up
Recommended Articles
Page :