实现文件上传（即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>
步骤总结：
原文：https://www.cnblogs.com/BruceChenAndHisBatCave/p/11774667.html