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>请选择文件