簡單的實現上傳檔案進度條
阿新 • • 發佈：2019-11-01
實現檔案上傳（即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）和請求網址
- 設定上傳進度事件，利用其事件物件獲取上傳進度百分比並改變進度條長度
- 傳送請求主題
&n