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

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. 也来说说C#异步委托（转）

    原文地址: http://www.cnblogs.com/lxblog/archive/2012/12/11/2813893.html 前些日子,看到园子里面有人用老王喝茶的例子讲解了一下同步和异步, ...

  2. C++经典面试题

    1.int a=5,则 ++(a++)的值是() A.5      B.   6          C.7       D.逻辑错误 a++返回的是一个暂时变量,这里是右值,不能再前面++了 2.以下 ...

  3. 自定义一个可以使用foreach语句进行迭代的类（IEnumerable）

    在c#中,凡是实现了IEnumerable接口的数据类型都可以用foreach语句进行迭代访问.所以,我们要定义一个可以使用foreach进行迭代访问的类,就必须要实现IEnumerable接口. / ...

  4. 转换到 COFF 期间失败: 文件无效或损坏 解决方法

    转自csdn 终极解决方案:VS2010在经历一些更新后,建立Win32 Console Project时会出“error LNK1123” 错误,解决方案为将 项目|项目属性|配置属性|清单工具|输 ...

  5. 分享一组Rpg Marker人物行走,游戏素材图片，共20张图片

    分享一组Rpg Marker人物行走,游戏素材图片,共20张图片 上面的下载地址链接是图片,无法直接复制哦!下载请直接点击: 游戏素材下载  或者复制以下链接:http://***/view/13.h ...

  6. Android ViewPager 应该及技巧

    1.   android 中的ViewPager 功能类似于iOS中的scrollView,实现最主要的页面的左右滑动功能.该类存在于Google的兼容包里面,所以在引用时记得在BuilldPath中 ...

  7. win7远程桌面连接

    远程桌面连接 1.在防火墙上设置同意同意远程桌面通过防火墙: 2.为管理员设置password.以便訪问者訪问: 3.我的电脑-右键属性-远程设置-远程-选上"同意远程协助远程这台计算机.同 ...

  8. apache2.2 虚拟主机配置

    一.改动httpd.conf 打开appserv的安装文件夹,找到httpd.conf文件,分别去掉以下两行文字前面的#号. #LoadModule vhost_alias_module module ...

  9. iOS xcode8提交 iOS10 “此构建版本无效” （已解决）

    近期上传应用,遇到了"此构建版本无效"的问题,如图 网查了一下,解决了这个问题:(注意:先不要急着怀疑是网络问题,重新提交,先检查问题,别问我怎么知道的...) 1:iOS10 之 ...

  10. laravel 5.0 artisan 命令列表（中文简体）

    #php artisan list Laravel Framework version Usage: [options] command [arguments] Options(选项): --help ...