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