Learn more. How to show the progress of download in the browser using socket. Asked 6 years ago. Active 6 years ago. Viewed 5k times. Actually I've tried downloading a file without using socket. Now I'm trying to implement using socket. Please check my edited code without using socket. With this code,I'm unable to display the progress of download in the browser. So,I'm planning to implement using socket. Actually,I'm trying to download a file from browser,so that the downloaded file will be in the ubuntu file system.
Now I'm trying to display the list of files and directories in the file system along with the status.
The current format of my web page is like this. Now trying to display the download status of a file,whether the download is complete or not. Show 3 more comments. Active Oldest Votes. Hi Prasun,how can we sen progress to the html page? How to control the browser progress update in the download process? Ask Question. Asked 9 years, 4 months ago.
Active 9 years, 4 months ago. Viewed times. PeeHaa Siva Siva 1, 2 2 gold badges 14 14 silver badges 25 25 bronze badges. Are you testing this locally? How long does the transfer take in total? Maybe it's just over too quickly Yes Deceze, I am testing locally, download happening quickly may be because of the local environment.
But want to know whether we can control the progress update intervals in any way Add a comment. We can calculate the percentage of the file downloaded by dividing the file currently downloaded by total size of file. That will return the value in between 0 and 1, for example 0. If you do not want to display the decimal points with it, you can call the floor method and it will return the integer value.
Then we simply set this percentage in span tag and add the percentage sign with it too. At this point, if you were downloading that file via IDM or browsers default download manager, you will be able to view the downloading speed of your file. So our next step is to show downloading speed too. Create a simple span tag and get it in javascript as we did earlier. To get the downloading speed, we have to apply some math on it.
Getting the download speed means we need to know how much KB of data is transferred in one second. Since we are getting downloaded data in bytes so we can convert that in kilo bytes by simply dividing by First we will get the duration since the file started downloading till now.
We can get it by getting the difference between current time and start time. That will return the time in milliseconds, so we can convert that into seconds by dividing with When we get the total duration of AJAX then we can get the bytes transferred per second by dividing the data currently transferred by this duration.
Now we have the Bytes per second, we can simply convert that to KB by dividing with since there are bytes in one KB. This value may also be in decimal points, so we will convert that into integer too by using the same Math. The algorithm to calculate the remaining time is pretty simple. We get the difference between total size of file and the file currently being downloaded, and divide that by amount of data downloaded in bytes per second.
This gives the time in seconds. But we need to show it in minutes too. For example, if this returns 90 seconds, then we need to display it as 1 minute and 30 seconds.
No need to create another span tag for it, we will display this data inside span we created for displaying transfer rate. We use the modulus operator to get the remaining seconds, and we apply that to 60 since there are 60 seconds in 1 minute. Similarly, we can divide the time to 60 and it returns the time in minutes since 60 seconds composed of 1 minute. These seconds and minutes may also be in decimal points, so we convert them to an integer using Math.
We can abort any AJAX request using simple abort function from ajax object. So we are simply creating a button which when clicked will abort the ajax request and you will see that progress bar, text, seconds and minutes will be stopped. This tutorial does not include any external library like jQuery. So you should be able to apply this in your project without having to include any library.
0コメント