I would like display something more meaningful that animated gif while users upload file to my web application. What possibilities do I have?
Edit: I am using .Net but I don't mind if somebody shows me platform agnostic version.
HTML allows you to add the file upload functionality to your website by adding a file upload button to your webpage with the help of the <input> tag. The <input type=”file”> defines a file-select field and a “Browse“ button for file uploads.
Use the <progress> tag to create a progress bar in HTML. The HTML <progress> tag specifies a completion progress of a task. It is displayed as a progress bar. The value of progress bar can be manipulated by JavaScript.
The progress bar would just go from 0-100 in an instant because it only has two states, Future incomplete and Future complete. Without any way to get the number of bytes transferred vs the total number of bytes or the progress of the request, there's no way to do this.
If you are interested how all this generally works client-site, this is it:
All the solutions hook up the form via javascript and change the forms target to a newly created, invisible IFRAME. Then they are free to use AJAX to request some status about the file from the server.
The IFRAME trick is needed because all the scripts running in the window that is doing the upload will hang until the the request is completed at which time the file is fully uploaded.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With