JavaScript文件上传与下载实现详解：从基础到分块上传

作者：半夏时间：2026-10-26 09:48:25浏览：460

本文详解JavaScript中文件上传与下载的实现方式。涵盖普通文件通过FormData和Fetch API上传，以及大文件分块上传、断点续传和进度显示的完整流程。同时介绍三种主流文件下载方法：location跳转、a标签下载及Blob对象处理，并提供相关第三方库推荐。

一、文件上传

1、普通文件上传

在 JavaScript 中实现文件上传，通常借助 HTML 表单提交机制。首先需要在页面中构建一个文件选择输入框：

<input type="file" id="fileInput">

随后在 JavaScript 代码中获取该输入框的 DOM 引用，并绑定 change 事件监听器以捕获用户选择：

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function () {
  // 在这里处理选择的文件
});

在事件回调中，通过 fileInput.files[0] 属性可以获取用户选中的 File 对象，进而对文件内容进行后续处理。

获取文件后，可调用 XMLHttpRequest 或 fetch API 发起网络请求完成上传操作。

若选择使用 XMLHttpRequest，代码示例如下：

var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);

var xhr = new XMLHttpRequest();
xhr.open('POST', 'url', true);
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log('upload success');
  }
};
xhr.send(formData);

若选择使用 fetch，代码示例如下：

var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);

fetch('url', {
  method: 'POST',
  body: formData
}).then(response => {
  if (response.ok) {
    console.log('upload success');
  }
});

此外，开发者也可引入如 axios 等第三方库简化上传逻辑，具体用法可参考对应文档。

2、大文件上传

针对大体积文件，常规做法是采用分块上传策略。即将完整文件切割为多个数据块，每个数据块独立发起 HTTP 请求进行上传。

实现大文件上传的具体步骤包括：

用户在前端界面选择目标文件。
前端将文件按指定大小分割为多个数据块。
遍历每个数据块，依次向服务器发送 HTTP 请求进行上传。
服务器接收各个数据块并暂时存储。
待所有数据块上传完毕后，服务器端将各块合并还原为完整文件。

在 JavaScript 环境中，主要依赖 File API（包含 File 和 Blob 对象）来完成文件的读取与上传操作。

以下提供一个基于 JavaScript 的大文件分块上传示例：

<input type="file" id="file-input">

// 上传文件块
function uploadChunk(file, start, end, chunk) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.setRequestHeader('Content-Type', 'application/octet-stream');
    xhr.setRequestHeader('Content-Range', 'bytes ' + start + '-' + end + '/' + file.size);
    xhr.send(chunk);
}

// 上传文件
function uploadFile(file) {
    var chunkSize = 1 * 1024 * 1024; // 分块大小为1MB
    var chunks = Math.ceil(file.size / chunkSize); // 计算分块数
    var currentChunk = 0; // 当前分块
    var start, end;
    while (currentChunk < chunks) {
        start = currentChunk * chunkSize;
        end = start + chunkSize >= file.size ? file.size : start + chunkSize;
        var chunk = file.slice(start, end);
        uploadChunk(file, start, end, chunk);
        currentChunk++;
    }
}

// 监听文件选择事件
document.getElementById('file-input').addEventListener('change', function(e) {
    var file = e.target.files[0];
    if (file) {
        uploadFile(file);
    }
});

该示例利用 XMLHttpRequest 对象执行上传，并显式设置了 Content-Type 和 Content-Range 响应头。其中 Content-Type 指定上传数据为二进制格式，Content-Range 则标明当前上传数据块在完整文件中的字节范围。

示例中将文件切分为多个数据块，每块大小设定为 1MB。通过 File API 的 slice 方法截取数据块，并借助 XMLHttpRequest 将各块上传至服务器。

需注意，上述代码仅为简化示例，实际生产环境还需考虑以下因素：

若服务器支持断点续传，应记录已上传的数据块标识，防止重复传输。
需设计失败重试机制，处理上传中断或失败的数据块。
上传过程中需实时展示进度条，使用户感知上传进度。
上传结束后需向用户反馈成功或失败状态。
服务器端需具备将分散数据块合并为完整文件的逻辑。
需评估服务器存储空间，可考虑采用分布式文件系统（如 HDFS）或云存储方案（如 Amazon S3）进行存储。
还需解决数据块上传顺序、完整性校验及断点续传等复杂问题。

通过分块上传机制，可有效避免一次性传输大文件导致的超时或内存溢出问题，同时便于实现断点续传与进度显示功能。

除原生实现外，也可借助第三方库简化大文件上传开发。常见库包括：

resumable.js
plupload
fine-uploader
tus-js-client

上述库均提供了文件分片、断点续传及进度监控等功能，能显著提升开发效率。

但需注意，引入第三方库可能增加代码复杂度及依赖负担。选型时应权衡利弊，确保其功能满足实际需求。

关于文件上传，还需掌握以下核心知识点：

HTML5 文件上传规范
文件上传技术原理
文件上传安全性防护
分块上传策略
断点续传机制
云存储集成

二、文件下载

在 JavaScript 中实现文件下载，主要有以下几种常见方式：

1、使用 window.location 实现：通过修改当前页面 URL 指向文件下载地址，触发浏览器下载行为。

window.location = 'file-download-url';

2、使用 a 标签实现：动态创建 a 标签，设置其 href 属性为文件地址，并添加 download 属性强制触发下载。

var link = document.createElement("a");
link.download = "filename";
link.href = "file-download-url";
link.click();

3、使用 fetch API 实现：通过 fetch 获取文件二进制内容，封装为 Blob 对象，再利用 URL.createObjectURL 生成临时 URL 触发下载。

fetch('file-download-url')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename';
    link.click();
    URL.revokeObjectURL(url);
    document.body.removeChild(link);
  });

至此，关于 JavaScript 文件上传与下载的实现详解已介绍完毕。如需了解更多相关内容，建议查阅本站过往文章或继续阅读后续章节，感谢支持。

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13