實現文件上傳（即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）和請求網址
- 設置上傳進度事件，利用其事件對象獲取上傳進度百分比並改變進度條長度
- 發送請求主題