原生JS实现文件上传和监视上传进度
2023-06-30 09:47
JavaScript
103
0
0
0
标题录入
封面图
先上传html页面代码： ```js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文件上传</title> </head> <body> <input type="file" name="file" id="file"> <div id="progress"> <div id="innerProgress"></div> </div> </body> </html> ``` js代码： ```js // 获取节点 let fileInput = document.getElementById("file"), progressBar = document.getElementById("innerProgress"); // 监听文件选择 fileInput.addEventListener('change', function () { // 获取文件 let file = this.files[0]; // 上传文件 let xhr = new XMLHttpRequest(); xhr.open("POST", "/upload", true); xhr.upload.addEventListener("progress", function (e) { // 获取上传进度 let percentComplete = ((e.loaded / e.total) || 0) * 100; // 设置百分比 progressBar.style.width = percentComplete + '%'; }, false); xhr.send(file); }); ```
上一篇：
JavaScript document.ready() 的用法
下一篇：
JavaScript replace() 使用方法
标题录入，一次不能超过6条
区块链
T:0.006970s,M:245.3 KB
返回顶部
留言
留言
评论