实现结果
小demo地址：/huangxx678/fileuploadbar.git
立个Flag：等我好好学完后端再重新写个完整的 ^ _ ^
先验知识点
MDN:FormData
FormData接口可以把表单数据构造成键值对，然后通过XMLHttpRequest.send()发送。
MDN:XMLHttpRequest
progress事件，监测传输进度，e.lengthComputable表示当前传输文件的长度是否可知，e.loaded表示已经传输的字节数，e.total表示总字节数，以此计算当前进度条长度
MDN:FileList
input标签的 type 属性为 file 时，可以通过inputElement.files[0]获取上传的一个文件
代码
前端 index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div class="center" style="width:404px;margin:100px auto;"><div id="file" style="width: 404px;height: 150px;text-align: center;padding-top: 30px;margin: center;background-color: rgb(232, 221, 203);"><input type="file" name="ver" id="fileInput" /><button class="upload" onclick="uploadFile()">上传</button><!-- 进度条 --><div class="progress" style="position: relative;top: 30px;width: 300px;height: 25px;line-height: 25px;margin:auto;text-align: center;border: 2px solid rgb(3, 101, 100);"><span class="percent" style="position: relative; z-index:100;">上传进度：0%</span><span class="probg" style="position: absolute;left: 0;top: 0;height: 25px;background-color: rgb(28, 170, 221);width: 0px;"></span></div></div><div class="feedback" style="width: 396px;height: 30px;line-height: 30px;padding:4px;margin-top:20px;background-color: thistle;">服务端回信：</div></div><script>let fileInput = document.getElementById("fileInput");let uploadbtn = document.querySelector(".upload");let progress = document.querySelector(".progress");let probg = document.querySelector(".probg");let percentInfo = document.querySelector(".percent");let feedback = document.querySelector(".feedback");// 文件上传进度let percent = 0;function progressFunction(e) {if (e.lengthComputable) {// 获取百分制的进度percent = Math.round(e.loaded / e.total * 100);// 长度根据进度条的总长度等比例扩大probg.style.width = progress.clientWidth / 100 * percent + "px";// 进度数值按百分制来percentInfo.innerHTML = "上传进度：" + percent + "%";}}// 上传成功function success(e) {console.log("成功" + e.currentTarget.responseText);feedback.innerHTML = "服务端回信：" + e.currentTarget.responseText;}// 上传失败function fail(e) {console.log("服务端回信：" + e);}// 文件上传function uploadFile() {let file = fileInput.files[0];if (!file) {alert("请选择文件！");return;}// 用FormData传输let fd = new FormData();fd.append("file", file);// 文件上传并获取进度let xhr = new XMLHttpRequest();xhr.open("post", "http://127.0.0.1:3000/", true);xhr.upload.onprogress = progressFunction;xhr.onload = success;xhr.onerror = fail;xhr.send(fd);}</script></body></html>
后端 server.js
const http = require("http")const server = http.createServer((req, res) => {res.setHeader("Access-Control-Allow-Origin", '*');});server.on('request', (req, res) => {res.end("SERVER:I received");})server.listen(3000);console.log("服务器已启动，监听3000端口，请使用localhost:3000访问");
