原生JS实现文件上传和监视上传进度
2023-06-30 09:47
JavaScript
SQL Server
Oracle
MySQL
PostgreSQL
NoSQL
大数据
其他数据库
Windows
Windows Server
Linux
macOS
嵌入式
APACHE
NGINX
redis
Docker
git
互联网
tomcat
Html/Css
JavaScript
jQuery
HTML5
Angular
React
Vue
小程序
架构设计
面向对象
设计模式
领域驱动设计
Android开发
iOS开发
Flutter
鸿蒙
其他手机开发
敏捷开发
项目与团队管理
软件工程其他
.NET
Java
Python
Go
PHP
C++
Ruby
Swift
C语言
Erlang
Delphi
Scala
R语言
Verilog
Dart
Rust
其他语言
asp
nodejs
读书区
翻译区
求职面试
计算机图形学
软件测试
菜谱
SEO技术
摄影
生活技巧
133
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.014354s,M:157.11 KB
返回顶部
留言
留言
评论