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

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. CSS选择器 使用小结

    ==> .x-boundlist-floating[style$="px;"] .x-boundlist-item 元素中含有Style属性,并且属性值以"px;& ...

  2. socat : Some useful commands

    http://technostuff.blogspot.com/2008/10/some-useful-socat-commands.html MONDAY, OCTOBER 6, 2008 Some ...

  3. 做什么都要坚持，写blog也一样，

    2015年一篇文章没写,惭愧,时间过的真快 好习惯要坚持,

  4. LNMP环境下压力测试时的主要调试参数

    LNMP环境下压力测试时的主要调试参数: 进行HTTP的压力测试时,很多时候会遇到很小的并发数,服务器就会出现不响应,或者连接超时,一般导致的原因有如下几点: 一.Nginx主要调试参数 主模块参数: ...

  5. Linux进程通信之System V消息队列

    System V消息队列是Open Group定义的XSI,不属于POSIX标准.System V IPC的历史相对很早,在上个世70年代后期有贝尔实验室的分支机构开发,80年代加入System V的 ...

  6. js验证身份证id

    function isCardNo(card) { // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X var reg = /(^\d{1 ...

  7. wget 命令用法详解

    wget是在Linux下开发的开放源代码的软件,作者是Hrvoje Niksic,后来被移植到包括Windows在内的各个平台上.它有以下功能和特点:(1)支持断点下传功能:这一点,也是网络蚂蚁和Fl ...

  8. IOS网络编程——第三方类库

    IOS网络编程——第三方类库 目录 概述 ASIHttpRequest AFNetworking 其他 概述 ASIHttpRequest AFNetworking 其他

  9. 第1章 游戏之乐——让CPU占用率曲线听你指挥

    让CPU占用率曲线听你指挥 写一个程序,让用于来决定Windows任务管理器(Task Manager)的CPU占用率.程序越精简越好,计算机语言不限.例如,可以实现下面三种情况: CPU的占用率固定 ...

  10. apt-mirror is already running（已运行）错误解决方案

    运行sudo apt-mirror却无法启动服务了.而是给出了一行错误提示信息:               apt-mirror is already running, exiting at /us ...