欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

php教程

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

php教程 我的站长站 2022-12-07 共47人阅读

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

<html>
<body>
<table border="1" width="300">
<tr><td width="100">文件大小</td><td width="200"><div id="filesize">未知长度</div></td></tr>
<tr><td>已经下载</td><td><div id="downloaded">0</div></td></tr>
<tr><td>完成进度</td><td><div id="progressbar" style="float:left;width:1px;text-align:center;color:#FFFFFF;background-color:#0066CC"></div><div id="progressText" style=" float:left">0%</div></td></tr>
</table>
<script type="text/javascript">
//文件长度
var filesize=0;
function $(obj) {return document.getElementById(obj);}
//设置文件长度
function setFileSize(fsize) {
    filesize=fsize;
    $("filesize").innerHTML=fsize;
}
//设置已经下载的,并计算百分比
function setDownloaded(fsize) {
    $("downloaded").innerHTML=fsize;
    if(filesize>0) {
        var percent=Math.round(fsize*100/filesize);
        $("progressbar").style.width=(percent+"%");
        if(percent>0) {
            $("progressbar").innerHTML=percent+"%";
            $("progressText").innerHTML="";
        } else {
            $("progressText").innerHTML=percent+"%";
        }
    }
}
</script>
<?php
ob_start();
@set_time_limit(300);//设置该页面最久执行时间为300秒
$url="http://dl_dir.qq.com/qqfile/qq/QQ2010/QQ2010Beta3.exe";//要下载的文件
$newfname="QQ2010Beta3.exe";//本地存放位置,也能够是E:\Temp\QQ2010Beta3.exe,这样作在Win7下要设置相应权限
$file = fopen ($url, "rb");
if ($file) {
    //获取文件大小
    $filesize = -1;
    $headers = get_headers($url, 1);
    if ((!array_key_exists("Content-Length", $headers))) $filesize=0;
    $filesize = $headers["Content-Length"];
    
    //不是全部的文件都会先返回大小的,有些动态页面不先返回总大小,这样就没法计算进度了
    if ($filesize != -1) {
        echo "<script>setFileSize($filesize);</script>";//在前台显示文件大小
    }
    $newf = fopen ($newfname, "wb");
    $downlen=0;
    if ($newf) {
        while(!feof($file)) {
            $data=fread($file, 1024 * 8 );//默认获取8K
            $downlen+=strlen($data);//累计已经下载的字节数
            fwrite($newf, $data, 1024 * 8 );
            echo "<script>setDownloaded($downlen);</script>";//在前台显示已经下载文件大小
            ob_flush();
            flush();
        }
    }
    if ($file) {
        fclose($file);
    }
    if ($newf) {
        fclose($newf);
    }
}
?>
</body>
</html>


标签 进度条
相关推荐
  • 进度条
  • PHP大文件分片上传并带进度条功能示例

    html文件:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>大文件切割上传带进度条</title> <link rel="stylesheet" href...

    php教程 55 1年前
  • Ajax实现文件上传进度条功能示例代码

    1. HTML代码<div class="form-group required"> <label class="col-sm-3 control-label">文件名:</label> <div class="col-sm-6"> <input id="fileName" name="fileName" class=&quot...

    js教程 68 1年前
  • 利用flush开发文件下载进度条功能示例

    原理就是分次读写,每次读多少字节,用socket保持与客户端通讯,利用flush()持续更新浏览器UI,返回已下载的数据大小,显示下载速度,以及进度条之类;<html><body><table border="1" width="300"><tr><td width="100">文件大小</td><td width="200"><div...

    php教程 47 1年前
  • ajax上传文件进度条功能示例代码

    ajax上传文件时,有时比较耗时,需要在界面上显示下进度信息,获取ajaxSettings中的xhr对象,为它的upload属性绑定progress事件的处理函数前端代码<!DOCTYPE html><html><head><meta charset="utf8"><title>test upload</title><!--jquery--><script src="h...

    js教程 65 1年前
  • slice大文件切割上传带进度条思路代码

    前端HTML代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>大文件切割上传带进度条</title> <link rel="stylesheet&...

    js教程 79 1年前