要实现进度条的显示,就要知道两个参数，上传的大小和总文件的大小

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上传文件进度条显示的更多相关文章

  1. ajax上传文件进度条

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. node实现http上传文件进度条 -我们到底能走多远系列（37）

    我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...

  3. php上传文件进度条

    ps:本文转自脚本之家 Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前 ...

  4. asp.net大文件上传与上传文件进度条问题

    利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...

  5. 折叠面板实现，上传文件进度条，三级联选择器，多级联选择器， 利用layui实现

    首先贴出html代码 <form class="layui-form" action=""> <div class="layui-f ...

  6. html5异步上传图片显示上传文件进度条

    <html> <head> </head> <body> <p> emo_album_id:<input type="tex ...

  7. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

  8. ajax上传文件及进度显示

    之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点). 那么具体怎么样实现ajax上传文件呢? 一般来 ...

  9. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

随机推荐

  1. $(document).ready()与 window.onload执行时机

    $(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别的.window.onload方法是子啊网页中的所有元素(包括元素的所有关联的文件)完 ...

  2. GridView实现多表头合并[转]

    1.这里先介绍单纯的GridView多表头合并,先上图: 可以看到,上图就是生成的多表头,具体的后台代码是在Row_Created事件中创建的.先看创建代码: protected void GridV ...

  3. 数据结构复习：直接插入排序与二分插入排序的C++实现

    1.直接插入排序 直接插入排序的过程可以理解为一个固定长度的数组被分为两个集合,即已排序集合和未排序. 开始时已排序集合为空,而未排序集合即为整个数组.当排序开始后插入一个对象,已排序集合元素数目加1 ...

  4. Java学习笔记之方法重载，动态方法调度和抽象类

    一.方法重载 如果子类中的方法与它的超类中的方法有相同的方法名,则称子类中的方法重载超类中的方法,特别是当超类和子类中的方法名和参数类型都相同时,在子类中调用该方法时,超类中的方法会被隐藏.考虑下面程 ...

  5. maven的学习系列（四）—创建maven项目注意事项

    文件夹: <1> 中央工厂的位置 <2>mvn archetype:generate <3>Eclipse配置maven <4>在Eclipse中创建简 ...

  6. 关于ORACLE DUAL表

    1.DUAL表的用途 Dual 是 Oracle中的一个实际存在的表,任何用户均可读取,常用在没有目标表的Select语句块中--查看当前连接用户 SQL> select user from d ...

  7. Java学习笔记（4）——JavaSE

    一.HashMap HashMap以键值对的形式存储对象,关键字Key是唯一的,不重复的 1,key可以是任何对象,Value可以任何对象 2,重复的key算一个,重复添加是替换操作(会覆盖原来的元素 ...

  8. [Express] Level 4: Body-parser -- Post

    Parser Setup Assume the body-parser middleware is installed. Now, let's use it in our Express applic ...

  9. MAC下配置gradle用eclipse 打包android程序

    1.下载gradle binhttp://gradle.org/gradle-download/ 2.配置gradle,http://www.douban.com/note/311599602/htt ...

  10. 进程控制之exec函数

    用fork函数创建子进程后,子进程往往要调用一种exec函数以执行另一个程序.当进程调用一种exec函数时,该进程执行的程序完全替换为新程序,而新程序则从其main函数开始执行.因为调用exec并不创 ...