原生JS实现文件上传和监视上传进度（实现进度条）

原创

于 2021-08-20 19:37:25 发布 · 5.5k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #node.js

本文介绍了如何使用原生JavaScript实现文件上传并实时监控上传进度，通过MDN的FormData、XMLHttpRequest相关知识，结合FileList接口，创建了一个简单的前端上传示例，并给出了前端HTML和后端Node.js的代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现结果

在这里插入图片描述

小demo地址：https://gitee.com/huangxx678/fileuploadbar.git

立个Flag：等我好好学完后端再重新写个完整的 ^ _ ^

先验知识点

MDN:FormData
FormData 接口可以把表单数据构造成键值对，然后通过 XMLHttpRequest.send() 发送。

MDN:XMLHttpRequest
progress 事件，监测传输进度，e.lengthComputable 表示当前传输文件的长度是否可知，e.loaded 表示已经传输的字节数，e.total 表示总字节数，以此计算当前进度条长度

MDN:FileList
input 标签的 type 属性为 file 时，可以通过 inputElement.files[0] 获取上传的一个文件

代码

前端 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="center" style="width:404px;margin:100px auto;">
        <div id="file" style="