簡單的實現上傳檔案進度條
阿新 • • 發佈: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