Implement File Upload Based on HTML5 Ajax and display the progress bar,
This article provides examples to illustrate how to upload files and progress bars through ajax and share them with you for your reference. The specific content is as follows:
:
Html5 upload is a synchronous upload method, so the progress bar can be displayed.
1. upload files:
First, we use ajax to obtain the file object of <input type = "file" id = "file_upload">:
Var file = null; var input = $ ("# file_upload"); // when selecting a file in the file field, run the readFile function input. addEventListener ('change', readFile, false); function readFile () {file = this. files [0];}
Then, use FormData () to send it to the background.
var fd = new FormData(); fd.append("file", file);
2. Listener events:Add an upload listening event to XMLHttpRequest to get the size of the uploaded file to display the progress bar.
// Listen to the event hr. upload. addEventListener ("progress", uploadProgress, false );
The complete code is as follows:
<Html>The above section describes how to upload all the content of a file with a progress bar through ajax. I hope this will help you learn more.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
