JavaScript-非flash 实现进度条 根据文件上传大小变化

UI设计界面 UI设计界面 主题:1059 回复:2190

JavaScript-非flash 实现进度条 根据文件上传大小变化

晚风撩人 发布于 2017-09-25 字数 460 浏览 1066 回复 3

需要
1.AJAX上传文件。
2.根据已经上传的文件大小来控制进度条。
3.当文件上传完成时能及时返回一个信号给前台,后台还会对这个文件做其他逻辑处理。
4.兼容IE系列(只是要兼容IE8)
5.不要用flash

这个话题(javascript进度条)里面的实现无法满足需求,麻烦推荐一款支持上面需要的进度条。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(3

灵芸 2017-10-26 3 楼

这个js监听不料,必须用ajax来实现。以php举例,php里的APC扩展模块中的APC_UPLOAD_PROGRESS可以监听文件上传大小,然后返回给前端,具体ajax前端实现这里不说了,给你个服务端php简单例子:

if ($_SERVER['REQUEST_METHOD'] == 'POST') { //上传请求
$status = apcfetch('upload' . $_POST['APC_UPLOAD_PROGRESS']);
$status['done'] = 1;
echo json_encode($status);
exit;
} elseif (isset($_GET['progress_key'])) { //读取上传进度
$status = apcfetch('upload'.$_GET['progress_key']);
echo json_encode($status);
exit;
} else {
//其他代码,比如上传表单等
}

网上有很多类似的进度条例子,你可以参考一下下面这个完整例子:
PHP文件上传进度条完整程序实现 jQuery Ajax apc

还有php服务端的例子:
APC方法实现PHP上传多个文件原理剖析

夜无邪 2017-10-12 2 楼

纯js无法实现,需要配合后台脚本才可以
上传先在header中获取file size,后台单独开启一个线程监听上传流,在积累上传到达例如每个1/10的位置发送js脚本控制客户端进度条走动并flush输出流让js代码运行

瑾兮 2017-10-08 1 楼

这个可以用第三方插件实现 给你推荐一下吧 uploadify 挺好用的 你说的功能都能实现;