Ajax file upload progress bar without flash

Active Oldest Votes. Sure, it's possible. Improve this answer. The t. Murali: use Web Archive: web. Ika18 Ika18 49 5 5 bronze badges. You don't need Flash. You do, however, still need to find a way to report the upload progress, which involves JS long polling and monitoring how much of the file is on the server vs. Sign up or log in Sign up using Google.

Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. We will be creating just 2 files, 1 for client index. So, start off by creating a simple HTML form in file index. In order to upload file via AJAX, first we need to stop the default form action method. All the code written in this tutorial is pure Javascript, there is no dependency of jQuery in this tutorial. Now, you have to get the user selected file and save it in a variable called file.

This object is supported in all browsers and it is native Javascript object, no jQuery is required. Now call open method, url, async function from ajax object. We can create a FormData object simply by the following line:. Call the send function from ajax object to actually call an AJAX request. It accepts 1 parameter that is of FormData object. For example, when server receives the request, if server does not exists, if server failed to respond etc.

All these callbacks are received in a function called onreadystatechange. Now we have to respond only if the request is successful. A file input option is used to choose the file and the file binaries are posted to the server via AJAX. After sending the file upload request to the server, the AJAX script initializes jQuery animation to show the file upload progress bar.

The progress bar will highlight the progressing percentage with jQuery animation. The landing page will show a HTML form with the file input. Users will choose the file and post the file data by submitting the form via AJAX. The jQuery and jQuery Form library is included at the beginning of the script.

A minimal jQuery validation script is added to check if the image file had been chosen before submitting the form. The ajaxForm function is used to submit the image file binaries to the PHP.