js文件上传以及上传时展示进度条（原生ajax）

有蝉

已于 2022-03-17 17:01:23 修改

阅读量2.8k

点赞数 3

分类专栏： js 文章标签： js文件上传以及上传时展示进度条

于 2019-06-19 10:42:30 首次发布

本文链接：https://blog.csdn.net/qq_37899792/article/details/92806494

版权

js 专栏收录该内容

77 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#bar-warp {
			width: 500px;
			height: 30px;
			border: 1px solid green;
		}

		#bar {
			width: 0px;
			height: 30px;
			background: green;
		}
	</style>
</head>

<body>
	<input type="file" name="pic" onchange="upfile();" />
	<div id="bar-warp">
		<div id="bar"></div>
	</div><span id="precent"></span><br />

	<script type="text/javascript">
		function upfile() {
			var pic = document.getElementsByTagName('input')[0].files[0];
			var fd = new FormData();//利用FormData传参
			var xhr = new XMLHttpRequest();
            //xhr.setRequestHeader('token',sessionStorage.getItem('token'))加token
			xhr.open('post', '01.php', true);
			xhr.onreadystatechange = function () {
				//readystate为4表示请求已完成并就绪
				if (this.readyState == 4) {
					document.getElementById('precent').innerHTML = this.responseText;
					//在进度条下方插入百分比
				}
			}

			xhr.upload.onprogress = function (ev) {
				//如果ev.lengthComputable为true就可以开始计算上传进度
				//上传进度 = 100* ev.loaded/ev.total
				if (ev.lengthComputable) {
					var precent = 100 * ev.loaded / ev.total;
					console.log(precent);
					//更改进度条，及百分比
					document.getElementById('bar').style.width = precent + '%';
					document.getElementById('precent').innerHTML = Math.floor(precent) + '%';
				}
			}
			fd.append('pic', pic);//FormData传参

			xhr.send(fd);

		}
	</script>
</body>

有蝉

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
js文件上传以及上传时展示进度条（原生ajax）

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> #bar-warp { width: 500px; height: 30px; border: 1px solid green;...
复制链接

扫一扫