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

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. Java浮点数精确计算

    BigDecimal是Java提供的一个不变的.任意精度的有符号十进制数对象.

  2. ExtJs FormPanel布局

    FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局表单,最重要的是正确分割,分割结果直接 ...

  3. Active Low-Pass Filter Design 低通滤波器设计

    2nd order RC Low-pass Filter Center frequency    fc = 23405.13869[Hz] Q factor                  Q = ...

  4. CSS布局经验谈

    1.盒子模型 CSS最具特色也是最本质的可以浓缩成盒子模型. 整个页面可以通过大盒子套小盒子,盒子挨着盒子放,摆成一个页面即可. 盒子即所谓的块元素,只有块元素才有宽和高,有了宽和高才能使盒子挨着盒子 ...

  5. C#编写的多生产者多消费者同步问题

    // 多个生产者和多个消费者,能生产n个产品的情况 using System; using System.Threading; public class HoldIntegerSynchronized ...

  6. 利用FluorineFx的ByteArray上传图片

    Flex端利用new PNGEncoder().encode(bitmapData)将png图片转换为ByteArray,然后传给服务器,服务端需要定义一个public ByteArray Uploa ...

  7. CSDN蒋涛:我为什么和王峰一起创办极客帮天使基金？

         i 黑马 记者:王静静 7月15日,i黑马在一家咖啡厅见到了CSDN创始人蒋涛,这位中国最大的程序猿社区的创始人,正在经营一份新事业,他和蓝港在线创始人王峰正式成立了天使基金"极客 ...

  8. google对js延迟加载方案的建议

    浏览器在执行JavaScript代码时会停止处理页面,当页面中有很多JavaScript文件或代码要加载时,将导致严重的延迟.尽管可以使用defer.异步或将JavaScript代码放到页面底部来延迟 ...

  9. java.net.SocketException四大异常解决方案【转】

    java.net.SocketException如何才能更好的使用呢?这个就需要我们先要了解有关这个语言的相关问题.希望大家有所帮助.那么我们就来看看有关java.net.SocketExceptio ...

  10. Linux内核高端内存 转

        Linux内核地址映射模型x86 CPU采用了段页式地址映射模型.进程代码中的地址为逻辑地址,经过段页式地址映射后,才真正访问物理内存. 段页式机制如下图.   Linux内核地址空间划分 通 ...