本文介绍了如何使用JavaScript结合FormData实现文件上传的进度条展示和图片即时预览。首先，通过设置静态资源使页面可用。然后详细阐述了文件上传进度条的前端和后端实现，包括监听上传事件、计算并更新进度。最后，讲解了文件上传图片的预览过程，涉及前端DOM操作、文件传递到服务端以及服务端保存和返回资源地址。
1. 准备工作
因为要发送Ajax请求,而Ajax技术的运行需要网站环境,因此其中一个解决方案是,将页面作为网站的静态资源暴露出来,然后通过浏览器进行访问.
1.1 静态资源
- 使用express将public下面的资源暴露出来
- 在根目录下面新建一个
public文件夹和一个app.js文件
// app.js
const express = require('express');
const path = require('path')
const app = express();
app.use(express.static(path.join(__dirname, 'public')))
app.listen(3000, () =>{
console.log('localhost:3000');
})
- 在public下新建一个
01.html
<!-- 01.html -->
<body>
<h2>通过静态资源访问 01.html</h2>
</body>
- 命令行输入
nodemon app.js(注意目录), 打开浏览器访问localhost:3000/01.html
2. 文件上传的进度条展示
- 下面的样式使用到了 bootstrap. 不导入也没关系
- 在文件上传的过程中,可以将上传的进度实时展示出来,这样用户的体验感会提升
- 核心代码如下:
file.onchange = function () {
xhr.upload.onprogress = function (ev) {
console.log( (ev.loaded / ev.total) * 100 + '%' );
}
}
- 思路如下:
1.在input框下面有一个显示进度条的元素
2.点击文件上传后,会触发file.onchange事件
3.在文件传到服务器(FormData)的过程中会持续触发xhr.upload.onprogress事件.
4.在onprogress事件中,会有一个ev对象,它保留着,文件上传的信息
5.利用文件上传的信息,算出上传的进度,显示在网页中
2.1 [栗子] - 上传的表单控件
<div class="container">
<div class="form-group">
<label>请选择文件
最低0.47元/天 解锁文章
5821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
