简单的实现上传文件进度条

实现文件上传（即input标签的file类型），可以使用XMLHttpRequest对象中的upload属性的progress事件，该事件的事件对象可以返回上传进度相关数据

XMLHttpRequestObject.upload.onprogress = function(e){};

其中e.loaded表示已经上传的数据大小，e.total表示整个文件的大小，用e.loaded除以e.total就可以获取上传的进度

那么该如何实现利用XHR传送表单呢？

我们可以利用FormData类对象来对form表单快速转化为键值对的构造方式，并将其作为请求主题发送出去

如下

<form>
		<input type="text" name="username" >
		<input type="password" name="userpwd" >
		<input type="file" name="userfile" >
		<input type="button" value="提交">
</form>

<script>
    var form = document.querySelector("form");
    var formObj = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.open('post','data.php');
    xhr.send(formObj);
</script>

由于FormData对象已经将form表单数据转化好，所以不再用设置请求头了，此时在服务器端就可以通过表单元素的name属性值获取表单值

综上所述，我们通过以下代码实现简单的文件上传进度条

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.outer {
			width:400px;
			height:30px;
			border: 1px solid #000;
			box-sizing: border-box;
		}
		.inner {
			width:0px;
			height:28px;
			background-color: yellowgreen;

		}
	</style>
</head>
<body>
	<form>
		<input type="text" name="username" >
		<input type="password" name="userpwd" >
		<input type="file" name="userfile" >
		<input type="button" value="提交">
	</form>
	<!-- 进度条外壳 -->
	<div class="outer">
		<!-- 进度条 -->
		<div class="inner"></div>
	</div>
	<script type="text/javascript">
		// 获取form表单
		var form = document.querySelector("form");
		// 获取提交键
		var submit = document.querySelector("input[type=button]");
		// 获取进度条
		var inner = document.querySelector(".inner");
		// 为提交键设置事件
		submit.onclick = function(){
			// 利用FormData快速格式化form表单
			var formObj = new FormData(form);
			// 创建xhr对象
			var xhr = new XMLHttpRequest();
			// 设置上传方式和网址
			xhr.open('post','data.php');
			// 因为FormData已经格式化好了，所以不用设置请求头了
			// xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			// 每当上传进度变化时就触发progress事件，改变进度条长度
			xhr.upload.onprogress = function(e){
				// 398为进度条最大长度
				inner.style.width = ((e.loaded / e.total) * 398) + 'px';
			}
			// 发送请求，将格式化后的form表单作为发送主体
			xhr.send(formObj);
		}
	</script>
</body>
</html>

　　步骤总结：

将包含有file类型的表单通过FormData构造函数格式化
创建XMLHttpRequest对象并设置发送方式（post）和请求网址
设置上传进度事件，利用其事件对象获取上传进度百分比并改变进度条长度
发送请求主题

简单的实现上传文件进度条

猜你喜欢