简单的实现上传文件进度条
- 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）和请求网址
- 设置上传进度事件，利用其事件对象获取上传进度百分比并改变进度条长度
- 发送请求主题
