ajax--上传进度条

最新推荐文章于 2021-09-07 18:17:36 发布

sonia_gintoki

最新推荐文章于 2021-09-07 18:17:36 发布

阅读量529

点赞数

分类专栏： ajax 文章标签： php ajax html5 javascript

本文链接：https://blog.youkuaiyun.com/sonia_gintoki/article/details/50591988

版权

ajax 专栏收录该内容

7 篇文章

订阅专栏

选择文件后就上传，并有进度条显示上传进度

	<style type="text/css">
	#big{
		width: 500px;
		height: 30px;
		border: 1px solid grey;
	}
	#sm{
		width: 0%;
		height: 30px;
		background: grey;
	}
	</style>

</head>
<body>
<div id="big">
	<div id="sm"></div>
</div>
	<input type="file" name="pic" οnchange="upload()">
</body>

bigdiv是进度条的外框

smalldiv是内部行走的进度条

<script type="text/javascript">
	function upload(){
			var pic=document.getElementsByName('pic')[0].files[0];
			var fd = new FormData();
			fd.append('file',pic);
			var xhr=new XMLHttpRequest();	
			xhr.open('POST','8file.php',true);
/*进度条需要2个最基础的信息
总大小 已上传大小

html5
有上传过程事件 onprogress
能读到这两个

在send之前
利用xhr2新标准 为上传过程写一个监听函数
*/

			xhr.upload.onprogress = function(ev){
				if(ev.lengthComputable){
					var percent = 100*ev.loaded/ev.total;
					// console.log(percent);
					// 进度条div的长度随percent增加而增加
					document.getElementById('sm').style.width=percent + '%';
					document.getElementById('sm').innerHTML = percent + '%';
				}
			}
			// 发送
			xhr.send(fd);

			}

	</script>