php+导入进度条怎么做
时间 : 2023-02-27 20:32:01声明: : 文章内容来自网络,不保证准确性,请自行甄别信息有效性
php+导入进度条是php开发者经常会面临的一个问题,在日常应用开发中,需要让用户了解数据文件上传、复制等操作正在进行时,能提升用户体验度,那么就需要开发导入进度条,这就是为什么要制作php+导入进度条的原因。
为了制作php+导入进度条,首先须要准备本地htm文件,其包括入如下内容:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php进度条</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="progress.js"></script>
</head>
<body>
<div id="showbar"></div>
<div id="showmsg"></div>
<form name="progress">
<input type="hidden" name="percent" value="0">
<input type="hidden" name="msg" value="">
</form>
</body>
</html>
然后,引入javascript文件来实现导入进度条,将如下js代码引入htm文件中:
$(document).ready(function() {
var bar = $("#showbar");
var msg = $("#showbar");
var percent = $("input[name='percent']").val();
var showmsg = $("input[name='msg']").val();
var options = {
percent: percent,
msg: showmsg
}
drawProgress(bar,options);
interval = setInterval(function(){
$.get("progress.php",function(data){
var percent = $("input[name='percent']").val(data.percent);
var showmsg = $("input[name='msg']").val(data.msg);
drawProgress(bar,options);
},'json');
},500)
});
最后,创建一个php文件,用来提供进度数据,如下:
//设置页面编码
header("content-type:text/html;charset=utf-8");
//定义耗时任务,模拟数据处理进度
for($i=0;$i<=100; $i++)
{
//判断是否有操作
if(isset($_GET['op']) && $_GET['op'] == "stop")
{
echo json_encode(array("msg"=>"","percent"=>0),JSON_UNESCAPED_UNICODE);
break;
}
usleep(50000);
echo json_encode(array("msg"=>"数据导入中...","percent"=>$i),JSON_UNESCAPED_UNICODE);
ob_flush(); //刷新标准输出缓冲,否则报错
flush(); //刷新PHP脚本输
PHP+导入进度条可以让用户能更清晰地了解当前数据操作的进度,在大文件上传或处理时特别有用,下面介绍PHP+导入进度条的实现步骤:
1、创建一个提交表单,同时引入一个进度条的文件,在表单中加入两个input元素,一个元素用于提交文件,另一个则用于套用前面引入的进度条容器;
2、提交表单,文件被上传到服务器,同时可以通过PHP的脚本获取上传文件的大小;
3、计算出文件传输的字节数,实现每次传输1KB后,将其记录在session中;
4、为进度条添加JS代码,根据文件总大小,当前传输的字节数以及session中记录的字节数,计算出传输的百分比,并通过JS更新进度条的显示;
5、显示文件上传的结果,实现上传文件的进度条。
使用PHP+导入进度条做大文件上传或处理,可以很大程度地提高用户体验,而实现PHP+导入进度条,也并不复杂。本文围绕上传文件,详细介绍了PHP+导入进度条的实现步骤,比较有参考价值。
上一篇
php源码数据库怎么弄
下一篇
php两个按钮左右怎么做
https/SSL证书广告优选IDC>>
推荐主题模板更多>>
推荐文章