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

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. Javascript(JS)对Cookie的读取、删除、写入操作帮助方法

    var CookieUtils = { get: function (name) { var cookieName = encodeURIComponent(name) + '=', cookieSt ...

  2. Android ndk下用AssetManager读取assets的资源

    转自:http://www.cppblog.com/johndragon/archive/2012/12/28/196754.html 在使用 cocos2dx 在 Android 上进行游戏开发时, ...

  3. Remove a Driver Package from the Driver Store

    http://technet.microsoft.com/en-us/library/cc730875.aspx Determine the name of the driver package in ...

  4. mina高并发短连接导致java.io.IOException: Too many open files解决方案

    http://marsvaadin.iteye.com/blog/1698924 mina性能测试 http://hi.baidu.com/rendong/item/bb5d2b0e4563c76dd ...

  5. Windows创建自动化任务

    Windows创建自动化任务使得开机就打开相应的Python目录 1:计算机管理 2:找到任务计划程序 3:创建基本任务 4:任务触发器 5: 建立bat执行文件 start "" ...

  6. jQuery分别获取选中的复选框值

    function jqchk(){  //jquery获取复选框值   var s='';   $('input[name="aihao"]:checked').each(func ...

  7. influxDB学习总结

    1.安装 请参考http://www.cnblogs.com/zhja/p/5996191.html, 安装完毕运行influxd,http://域名:8083为控制台界面:http://域名:808 ...

  8. Codeforces Gym 100463B Music Mess Hash 逻辑题

    Music Mess Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100463/attachments ...

  9. C#中的ICollection接口

    一.集合类: 1.1 ICollection接口 前面我们学习了数组,这是.net Framework定义的最基本的集合类型,除过数组外,.net Framework还另外定义了很多集合类型以满足编程 ...

  10. Fitness training

    2014-01-14 第一次跑步,结束后大腿酸. 2014-01-15 第二次跑步,跑的过程中臀部酸痛,结束后大腿酸痛. 已经进行跑步8次了,后6次,每次3000米 2014-02-06  plank ...