Asynchronous file transfer in AJAX

To transfer Files in jQuery using Ajax we follow the following steps and an example demonstrating the same:

  1. Using HTML5, we can upload files using a form. The content-type is specified as multipart/form-data.
  2. An input field is created for files to be uploaded with input type as file.
  3. We can use the multiple attribute to allow more than one file to be uploaded and can also filter out file types by using the accept attribute.
  4. On upload a listener appends the uploaded files to a file list iteratively.
  5. With the submit button an ajax request is created and the form data is sent across to the specified url.

Example: Here consider the case of sending videos asynchronously.

  • We have created an HTML5 form as below:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <div>
        <form method="POST" enctype="multipart/form-data"
                action="" id="capt">
            <div class="form-group">
                <label>Select Files</label>
                <input type="file" id="file" name="file[]"
                    accept="video/*" class="form-control"
                    multiple="multiple" required>
            </div>
      
            <input type="submit" class="btn btn-info"
                    value="Submit">
        </form>
    </div>

    chevron_right

    
    

  • Using jQuery, we create appropriate methods for uploading and sending file asynchronously.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    var fileList = [];
      
    $('#file').on('change', function (event) {
      
        fileList = [];
      
        // Append files to fileList
        for (var i = 0; i < this.files.length; i++) {
            fileList.push(this.files[i]);
        }
    });
      
    sendFile = function (file) {
      
        // Create Ajax Request
        $.ajax({
            url: 'notify.php',
            type: 'POST',
            data: new FormData($('form')[0]),
            cache: false,
            contentType: false,
            processData: false
        });
    }
      
    $('#capt').on('submit', function (event) {
        event.preventDefault();
          
        //Asynchronous Transfer
        sendFile(file);
    });

    chevron_right

    
    

  • For the sake of demonstrating the output, we create a minimal PHP file as below:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?php
      
    $video = $_FILES['file']['name'];
    foreach($video as $vd){
        echo $vd."<br>";
    }
    ?>

    chevron_right

    
    

  • Output(notify.php):




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.