利用flush开发文件下载进度条功能示例

﹏ヽ暗。殇╰゛Y 2024-03-16 16:32 47阅读 0赞

原理就是分次读写，每次读多少字节，用socket保持与客户端通讯，利用flush（）持续更新浏览器UI，返回已下载的数据大小，显示下载速度，以及进度条之类；

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 </td> 
 <td> <code>&lt;html&gt;</code> <code>&lt;body&gt;</code> <code>&lt;table&nbsp;border=</code><code>"1"</code>&nbsp;<code>width=</code><code>"300"</code><code>&gt;</code> <code>&lt;tr&gt;&lt;td&nbsp;width=</code><code>"100"</code><code>&gt;文件大小&lt;/td&gt;&lt;td&nbsp;width=</code><code>"200"</code><code>&gt;&lt;div&nbsp;id=</code><code>"filesize"</code><code>&gt;未知长度&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;</code> <code>&lt;tr&gt;&lt;td&gt;已经下载&lt;/td&gt;&lt;td&gt;&lt;div&nbsp;id=</code><code>"downloaded"</code><code>&gt;0&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;</code> <code>&lt;tr&gt;&lt;td&gt;完成进度&lt;/td&gt;&lt;td&gt;&lt;div&nbsp;id=</code><code>"progressbar"</code>&nbsp;<code>style=</code><code>"float:left;width:1px;text-align:center;color:#FFFFFF;background-color:#0066CC"</code><code>&gt;&lt;/div&gt;&lt;div&nbsp;id=</code><code>"progressText"</code>&nbsp;<code>style=</code><code>"&nbsp;float:left"</code><code>&gt;0%&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;</code> <code>&lt;/table&gt;</code> <code>&lt;script&nbsp;type=</code><code>"text/javascript"</code><code>&gt;</code> <code>//文件长度</code> <code>var</code>&nbsp;<code>filesize</code><code>=0;</code> <code>function</code>&nbsp;<code>$(obj)&nbsp;{ </code><code>return</code>&nbsp;<code>document.getElementById(obj);}</code> <code>//设置文件长度</code> <code>function</code>&nbsp;<code>setFileSize(fsize)&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>filesize</code><code>=fsize;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"filesize"</code><code>).innerHTML=fsize;</code> <code>}</code> <code>//设置已经下载的,并计算百分比</code> <code>function</code>&nbsp;<code>setDownloaded(fsize)&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"downloaded"</code><code>).innerHTML=fsize;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(</code><code>filesize</code><code>&gt;0)&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>percent=Math.</code><code>round</code><code>(fsize*100/</code><code>filesize</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"progressbar"</code><code>).style.width=(percent+</code><code>"%"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(percent&gt;0)&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"progressbar"</code><code>).innerHTML=percent+</code><code>"%"</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"progressText"</code><code>).innerHTML=</code><code>""</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code><code>else</code>&nbsp;<code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"progressText"</code><code>).innerHTML=percent+</code><code>"%"</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>&lt;/script&gt;</code> <code>&lt;?php</code> <code>ob_start();</code> <code>@set_time_limit(300);</code><code>//设置该页面最久执行时间为300秒</code> <code>$url</code><code>=</code><code>"http://dl_dir.qq.com/qqfile/qq/QQ2010/QQ2010Beta3.exe"</code><code>;//要下载的文件</code> <code>$newfname</code><code>=</code><code>"QQ2010Beta3.exe"</code><code>;</code><code>//本地存放位置，也能够是E:\Temp\QQ2010Beta3.exe，这样作在Win7下要设置相应权限</code> <code>$file</code>&nbsp;<code>=&nbsp;</code><code>fopen</code>&nbsp;<code>(</code><code>$url</code><code>,&nbsp;</code><code>"rb"</code><code>);</code> <code>if</code>&nbsp;<code>(</code><code>$file</code><code>)&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//获取文件大小</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$filesize</code>&nbsp;<code>=&nbsp;-1;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$headers</code>&nbsp;<code>=&nbsp;get_headers(</code><code>$url</code><code>,&nbsp;1);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>((!</code><code>array_key_exists</code><code>(</code><code>"Content-Length"</code><code>,&nbsp;</code><code>$headers</code><code>)))&nbsp;</code><code>$filesize</code><code>=0;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$filesize</code>&nbsp;<code>=&nbsp;</code><code>$headers</code><code>[</code><code>"Content-Length"</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//不是全部的文件都会先返回大小的，有些动态页面不先返回总大小，这样就没法计算进度了</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(</code><code>$filesize</code>&nbsp;<code>!=&nbsp;-1)&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>echo</code>&nbsp;<code>"&lt;script&gt;setFileSize($filesize);&lt;/script&gt;"</code><code>;</code><code>//在前台显示文件大小</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$newf</code>&nbsp;<code>=&nbsp;</code><code>fopen</code>&nbsp;<code>(</code><code>$newfname</code><code>,&nbsp;</code><code>"wb"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$downlen</code><code>=0;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(</code><code>$newf</code><code>)&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>while</code><code>(!</code><code>feof</code><code>(</code><code>$file</code><code>))&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$data</code><code>=</code><code>fread</code><code>(</code><code>$file</code><code>,&nbsp;1024&nbsp;*&nbsp;8&nbsp;);</code><code>//默认获取8K</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$downlen</code><code>+=</code><code>strlen</code><code>(</code><code>$data</code><code>);</code><code>//累计已经下载的字节数</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fwrite(</code><code>$newf</code><code>,&nbsp;</code><code>$data</code><code>,&nbsp;1024&nbsp;*&nbsp;8&nbsp;);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>echo</code>&nbsp;<code>"&lt;script&gt;setDownloaded($downlen);&lt;/script&gt;"</code><code>;</code><code>//在前台显示已经下载文件大小</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ob_flush();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flush</code><code>();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(</code><code>$file</code><code>)&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fclose(</code><code>$file</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(</code><code>$newf</code><code>)&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fclose(</code><code>$newf</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>?&gt;</code> <code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

[\# 随心笔谈][Link 1]

[Link 1]: http://www.che0.com/sxbt