Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数，上传的大小和总文件的大小
html5提供了一个上传过程事件，在上传过程中不断触发，然后用已上传的大
小/总大小,计算上传的百分比,然后用这个百分比控制div框的显示，就可以
实现上传的进度条效果
前端页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax上传文件进度条显示</title>
<script type="text/javascript">
function upfile(){
var pic=document.getElementsByTagName('input')[0].files[0];
var fd=new FormData();
var xhr=new XMLHttpRequest();
xhr.open('post','01.php',true);
xhr.onreadystatechange=function (){
if(this.readyState==4){
document.getElementById('precent').innerHTML=this.responseText;
}
}
xhr.upload.onprogress=function (ev){
//console.log(ev);控制台打印progress { target: XMLHttpRequestUpload, isTrusted: true, lengthComputable: true,
//loaded: 15020, total: 15020, eventPhase: 0, bubbles: false, cancelable: false, defaultPrevented: false,
//timeStamp: 1445144855459000, originalTarget: XMLHttpRequestUpload }
if(ev.lengthComputable){
var precent=100 * ev.loaded/ev.total;
console.log(precent);
document.getElementById('nei').style.width=precent+'%';
document.getElementById('precent').innerHTML=Math.floor(precent)+'%';
}
}
fd.append('pic',pic); xhr.send(fd); }
</script>
<style>
#wai{
width:500px;
height:30px;
border:1px solid green;
}
#nei{
width:0px;
height:30px;
background:green;
}
</style>
</head>
<body>
<div id="wai">
<div id="nei"></div>
</div><span id="precent"></span><br/>
<input type="file" name="pic" onchange="upfile();"/>
</body>
</html>
页面显示效果
Ajax上传文件进度条显示的更多相关文章
- ajax上传文件进度条
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- node实现http上传文件进度条 -我们到底能走多远系列（37）
我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...
- php上传文件进度条
ps:本文转自脚本之家 Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前 ...
- asp.net大文件上传与上传文件进度条问题
利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...
- 折叠面板实现，上传文件进度条，三级联选择器，多级联选择器， 利用layui实现
首先贴出html代码 <form class="layui-form" action=""> <div class="layui-f ...
- html5异步上传图片显示上传文件进度条
<html> <head> </head> <body> <p> emo_album_id:<input type="tex ...
- ajax上传文件显示进度
下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...
- ajax上传文件及进度显示
之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点). 那么具体怎么样实现ajax上传文件呢? 一般来 ...
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
随机推荐
- WSO2 Stratos手册
WSO2 Stratos是最完整的企业级cloud solution,提供了一个开放的PaaS平台,相比于其他的PaaS平台来说,Stratos支持更多核心的服务.Stratos2.0对那些想从异构环 ...
- 无法将类型为 excel.applicationclass 的 com 强制转换为接口类型 的解决方法。
今天碰到客户的电脑在导出EXCEL的时候提示,无法将类型为 excel.applicationclass 的 com 强制转换为接口类型 excel._application 的问题 最后用下面的方法 ...
- LVS测试小结
RedHat5实现负载均衡 http://blog.sina.com.cn/s/blog_4e424e2101007rie.html http://www.doc88.com/p-9975618478 ...
- CodeForces 163A Substring and Subsequence dp
A. Substring and Subsequence 题目连接: http://codeforces.com/contest/163/problem/A Description One day P ...
- VK Cup 2012 Qualification Round 1 C. Cd and pwd commands 模拟
C. Cd and pwd commands Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset ...
- This implementation is not part of the Windows Platform FIPS validated cryptographic algorithms. 此实现不是 Windows 平台 FIPS 验证的加密算法的一部分 解决方案
但web启用了md5加密后 有可能出现这样的错误 This implementation is not part of the Windows Platform FIPS validated cryp ...
- 汽车XX网站秒杀抢购代码
.../////完整抢购代码某网站最近在举办半价秒杀 其实有技巧的 首先可以添加代码 //自动监视回车,直接回车提交document.onkeydown=function(e){var theEven ...
- Qt Quick实现的涂鸦程序
之前一直以为 Qt Quick 里 Canvas 才干够自绘.后来发觉不是,原来还有好几种方式都能够画图! 能够使用原始的 OpenGL(Qt Quick 使用 OpenGL 渲染).能够构造QSGN ...
- 使用Url.Routeurl获取url值。
1,获取url值. public ActionResult About() { RouteValueDictionary RVD = new Ro ...
- android开发环境 eclipse + android sdk配置笔记
本开发环境为:eclipse + android sdk,步骤说明的顺序,没有特别要求,看个人爱好了 步骤说明: 1.安装eclipse 2.配置jdk 3.安装android sdk 4.安装ADT ...