Asynchronous file transfer in AJAX

Asynchronous file transfer in AJAX

Last Updated : 28 Apr, 2025

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

Using HTML5, we can upload files using a form. The content-type is specified as multipart/form-data.
An input field is created for files to be uploaded with input type as file.
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.
On upload a listener appends the uploaded files to a file list iteratively.
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:

html

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

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

javascript

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

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

php

<?php

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

Output(notify.php):

Asynchronous file transfer in AJAX

R

rahul_goswami

Improve

Article Tags :

Similar Reads

What is an asynchronous request in AJAX ?

In this article, we will have a deep look into Asynchronous AJAX requests. Basically, AJAX provides two types of requests namely Synchronous AJAX and Asynchronous AJAX. Asynchronous requests in AJAX don't wait for a response from the server whereas synchronous waits for the response. When asynchrono

How to Use jQueryâ€™s ajax() Function for Asynchronous HTTP Requests ?

In this article, we are going to see how we can use jQuery's ajax() function to call backend function asynchronously or in other words HTTP Requests. AJAX is a set of web development techniques used by client-side frameworks and libraries to make asynchronous HTTP calls to the server. AJAX stands fo

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

Difference between synchronous and asynchronous requests in jQuery Ajax

In this article, we'll look at the differences between synchronous and asynchronous JQuery Ajax requests. JQuery provides several built-in methods for requesting data from the server: HTML, TXT, JSON, or String data can be requested. $.ajax() is a popular JQuery method for making synchronous and asy

How to Send an Image using Ajax ?

Ajax stands for Asynchronous Javascript and XML and is used to make indirect requests to other origins. It can help you to perform a change to the web page dynamically.We can make an AJAX request with a special object called XMLHttpRequest which provides us with different methods to create an HTTP r

How To Return the Response From an Asynchronous Call in JavaScript?

To return the response from an asynchronous call in JavaScript, it's important to understand how JavaScript handles asynchronous operations like fetching data, reading files, or executing time-based actions. JavaScript is a single-threaded nature means it can only handle one task at a time, but it u

How to Copy a File in Node.js?

Node.js, with its robust file system (fs) module, offers several methods to copy files. Whether you're building a command-line tool, a web server, or a desktop application, understanding how to copy files is essential. This article will explore various ways to copy a file in Node.js, catering to bot

How To Use Ajax in WordPress?

Ajax (Asynchronous JavaScript and XML) is a powerful technique used in web development to create more responsive web applications. By using Ajax, you can send and retrieve data from a server asynchronously without interfering with the display and behaviour of the existing page. In WordPress, combini

Difference between Synchronous and Asynchronous Method of fs Module

Asynchronous fs methods in Node.js do not block the event loop and handle multiple operations concurrently, improving performance while Synchronous fs methods block the event loop until the operation completes, which can lead to inefficiencies and slower performance for I/O-bound tasks. Table of Con

How to use simple API using AJAX ?

AJAX (Asynchronous JavaScript and XML) is a set of tools used to make calls to the server to fetch some data. In this article, we will see how to implement a simple API call using AJAX. Prerequisites: Basic knowledge of AJAX and its function. You can learn all the basics from here. What are basic bu