原生JS实现文件上传和监视上传进度（实现进度条） |
您所在的位置：网站首页 › input标签file › 原生JS实现文件上传和监视上传进度（实现进度条） |
原生JS实现文件上传和监视上传进度（实现进度条）
|
实现结果
小demo地址：https://gitee.com/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> Document 上传 上传进度：0% 服务端回信： 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); }后端 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访问"); |
【本文地址】
今日新闻 |
推荐新闻 |