Based on HTML5 Ajax implementation file upload and display progress bar _ajax related

This article illustrates the Ajax upload file and progress bar implementation methods, share for everyone to reference, the specific content as follows

Effect Chart:

HTML5 upload is the way of synchronous upload, so can achieve the display of progress bar.
1. Upload file:

First we use Ajax to get the file object of <input type= "file" id= "File_upload" >:

var file = null; 
var input = $ ("#file_upload"); 
File domain when selecting files, execute readFile function 
input.addeventlistener (' Change ', readfile,false); 
function ReadFile () { 
 file = This.files[0]; 

Then use Formdata () to send to the background.

 var fd = new FormData (); 

2. Monitor event: to add the XMLHttpRequest in the upload, you can get the uploaded file size, to achieve the display of progress bar.

 
Monitor event 
Hr.upload.addEventListener ("Progress", uploadprogress, false); 

The complete code is as follows:

The above is about Ajax to achieve with the progress of the file upload all the content, I hope to help you learn.