上传文件与设置进度条

1、引入bootstrap.css和jquery.js

2、点击按钮后获取文件列表，添加到FormData，调用open函数指定类型与URL地址，在发起请求send（）；

3、监听onreadystatechange事件，当服务器回应后，把传回来的数据转换成JSON字符串，修改img的URL地址，让图片文件显示在页面中；

4、创建xhr对象开启监听文件上传进度，e.lengthComputable是true则计算进度条百分比，把结果给进度条；

5、进度条完成后，修改颜色，移除类添加类

HTML

JS

首先要声明一点，本文讲的是使用node上传文件到远程服务器的，比如说我们可以使用node上传图片到CDN。如果小伙伴想看的是node服务如何接收客户端上传的文件，那么你不用往下看了。

在前端项目中，我们常用的办法是使用 input 元素选择文件，然后构建 js FormData类的实例，并调用append方法将文件添加到FormData实例中，然后使用ajax库发起ajax请求上传文件即可。

那么在node里面有什么不一样呢？

完成以上工作就可以使用ajax库上传文件到服务端了！

---