JavaScript-安装或上传进度条是怎么实现的？
上传文件安装某个软件的进度条，好像都是用vb或vc，还有用flash来实现的。我想问一下大虾们有用js+html来实现进度条的吗？不是那种“骗人”的那种假进度条，是按严格的进度比例的？赐教！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
上传文件安装某个软件的进度条，好像都是用vb或vc，还有用flash来实现的。我想问一下大虾们有用js+html来实现进度条的吗？不是那种“骗人”的那种假进度条，是按严格的进度比例的？赐教！
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论（4）
由于HTTP不是长连接，所以对于Web来说，实现上传进度条就有点困难，目前网上所有基于HTML和JavaScript的上传进度条都是你说的“骗人”的，其它语言的我没有用过，但是对PHP来说，PHP的创始人写了一个APC扩展，然后前端结合Ajax＋HTML可以实现上传进度条，这个我以前也试过，可以实现你要的功能，参考这个来配置。http://www.xinblog.info/?post=144
另外一种方法是使用PECL扩展模块 uploadprogress实现（http://pecl.php.net/package/uploadprogress）
至于其它的都是基于插件的形式实现的，其中之一就是像@崔苔吾所说的基于JQuery和Flash的uploadify实现，还有一个是叫swfUpload的也是基于flash的，但是它是是基于纯JavaScript的插件，我用的比较多的也就是这一个，配置起来也很简单、实用，强烈推荐。这里有很多是swfupload的Demo,[http://demo.swfupload.org/]
用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现（http://pecl.php.net/package/apc）.
安装APC，参照官方文档安装，可以使用PECL模块安装方法快速简捷，这里不说明
配置php.ini，设置参数 apc.rfc1867=1 ，使APC支持上传进度条功能，在APC源码说明文档里面有说明
代码范例：
if ($_SERVER['REQUEST_METHOD'] == 'POST') { //上传请求
$status = apc_fetch('upload_' . $_POST['APC_UPLOAD_PROGRESS']);
$status['done'] = 1;
echo json_encode($status); //输出给用户端页面里的ajax调用，相关文档请自己寻找
exit;
} elseif (isset($_GET['progress_key'])) { //读取上传进度
$status = apc_fetch('upload_'.$_GET['progress_key']);
echo json_encode($status);
exit;
} else {
//其他代码，比如上传表单等
}
这个现在可以用的插件太多了：
我推荐一用这个：
下载地址：http://www.uploadify.com/download/
Uploadify简单说来，是基于Jquery的一款文件上传插件。它的功能特色总结如下：
支持单文件或多文件上传，可控制并发上传的文件数
在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java……
通过参数可配置上传文件类型及大小限制
通过参数可配置是否选择文件后自动上传
易于扩展，可控制每一步骤的回调函数（onSelect, onCancel……）
通过接口参数和CSS控制外观
这里有更多：
22个很棒的jQuery文件上传插件：http://sd.csdn.net/a/20110804/302659.html
给你一个js+css的进度条代码，直接站出来改成你需要的就行了
<html>
<head>
<title>渐变效果进度条</title>
<script language="javascript">
var i;
function go()
{
bar_width = document.getElementById("bg").clientWidth;
i = bar_width;
setTimeout('start();',300);
}
function start()
{
if(i-->0)
{
ps.style.width = i;
bn.innerHTML = Math.floor((bar_width-i)/bar_width*100)+"%";
setTimeout('start();',20);
}
}
</script>
<style type="text/css">
#bg {
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr=#FFFF00, EndColorStr=#FF0000);
width:300px;
height:20px;
border:1px solid black;
z-index:0;
position:absolute;
}
#ps {
float:right;
background-color:#FFFF00;
width:100%;
}
#bn {
position:absolute;
text-align:center;
width:100%;
height:100%;
cursor:default;
}
</style>
</head>
<body onload="go();">
<div id="bg"><div id="ps"></div><span id="bn">0%</span></div>
</body>
</html>