FormData()二进制文件上传+进度条（组件结构源于Bootstrap）

注意引用bootstrap组件时除了粘贴结构，还要引入样式css文件、jQuery文件和bootstrap脚本文件

因为bootstrap是基于jQuery的，所以注意顺序。

客户端  16ajax.html  代码：（外链部分）

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

 客户端  16ajax.html  代码：（结构部分）

<div id="container">
    <input type="file" name="file" id="file" />

    <div class="progress">
        <div id="bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                0%
        </div>
     </div>
     <div id="review"></div>
</div>

文件上传功能

1、表单input的type值为：file

2、上传文件时会触发input的onchange事件

3、对于上传的文件会有一个集合来接收，就是files，获取上传的一个文件应该用files[0]

上传进度功能

文件上传的进度无非就是随文件上传的多少而变化

Ajax对象对于文件上传也有对应的事件：xhr.upload.onprogress 在文件上传过程中持续触发

事件中的回调函数存在参数（举例：ev）：

        ev.loaded：表示文件已上传了多少

        ev.total：表示文件的总大小

        ev.loaded/ev.total就是文件上传了多少，(ev.loaded/ev.total)*100+“%”也就是上传的百分比

使用文件上传进度的前提是有文件，所以这些需要写到input文件上传表单项的onchange事件下

借助FormData表单对象：页面结构中没有form，但是可以创建空对象

 客户端  16ajax.html  代码：（脚本部分）

<script>
        var file = document.getElementById('file');
        var bar = document.getElementById('bar');
        // 为文件选择控件添加onchanges事件
        file.addEventListener('change', function() {
            // 创建一个空的formData表单对象，页面中没有form标签，所以这里创建一个空的表单对象
            var formData = new FormData();

            // 将用户选择的文件追加到formData表单对象中
            formData.append('attrName', this.files[0]);
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 对ajax对象进行配置
            xhr.open('post', 'http://localhost:3000/upload');
            // 在文件上传的过程中持续触发
            xhr.upload.onprogress = function(ev) {
                    var result = (ev.loaded / ev.total) * 100 + '%';
                    bar.style.width = result;
                    // 将百分比显示在进度条中
                    bar.innerHTML = result;
                }
            // 发送ajax请求
            xhr.send(formData);
            // 监听服务器端响应给客户端的数据
            xhr.onload = function() {
                // 如果服务器端响应成功
                if (xhr.status == 200) {
                    // console.log(xhr.responseText);
                    var result = JSON.parse(xhr.responseText);
                    // 动态创建img表单
                    var img = document.createElement('img');
                    // 给图片标签设置属性
                    img.src = result.path;
                    // 给图片设置大小
                    img.style.width = '200px';
                    // 在图片加载完成之后会触发img的onload事件
                    img.addEventListener('load', function() {
                        review.appendChild(img);
                    })
                    // 如果不动态创建img，直接给设置标签img的属性src的话，就会看得到图片加载的过程，影响用户体验
                }
            }
        })
</script>

 服务器端 app.js代码:（formidable解析表单对象+文件上传配置+文件路径截取以备客户端预览）

const express = require('express');
const path=require('path');
const formidable = require('formidable');
 
const app = express();
 
//指明静态文件目录位置，以便浏览器中对（客户端）静态文件的加载
app.use(express.static(path.join(__dirname, 'public')));
 
// 实现文件上传的路由
app.post('/upload', (req, res) => {
    // 创建formidable表单解析对象
    const form = new formidable.IncomingForm();
    // 设置客户端上传文件的存储路径
    form.uploadDir = path.join(__dirname, 'public', 'uploads');
    // 保留上传文件的后缀名字
    form.keepExtensions = true;
    // 解析客户端传递过来的FormData对象
    form.parse(req, (err, fields, files) => {
        // 将文件地址进行拆分，将客户端传递过来的文件地址响应到客户端，用于客户端的预览
        res.send({
            path: files.attrName.path.split('public')[1]
        });
    });
});
 
app.listen(3000);
console.log('3000已启动');