JavaScript基础之文件上传与下载的实现详解

更新时间：2023年01月30日 09:06:57 作者：yuzhihui

这篇文章主要为大家详细介绍了JavaScript实现文件上传与下载功能的相关资料，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以学习一下

一、文件上传

1、普通文件上传

JavaScript 可以使用表单提交来实现文件上传。首先，在 HTML 中创建一个文件输入框：

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

然后，在 JavaScript 中获取文件输入框的引用，并在其上设置事件监听器，如下所示：

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

在事件监听器中，可以使用 fileInput.files[0] 属性获取选择的文件，然后对文件进行处理。

接下来可以使用 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 API 获取文件内容，并将其写入 Blob 对象，最后利用 URL.createObjectURL 将其下载。

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文件上传下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Bootstrap模态窗口源码解析
这篇文章主要为大家详细解析了Bootstrap模态窗口源码，基本每行都加了注释，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
js知识点总结之getComputedStyle的用法
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值,下面这篇文章主要给大家介绍了关于js知识点总结之getComputedStyle用法的相关资料,需要的朋友可以参考下
2022-10-10
如何用js判断当前是否是企业微信环境还是微信环境
这篇文章主要给大家介绍了关于如何用js判断当前是否是企业微信环境还是微信环境的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2024-04-04
微信小程序开发之实现别踩白块游戏
这篇文章主要为大家详细介绍了如何通过微信小程序开发一个简单的别踩白块游戏，文中的示例代码讲解详细，感兴趣的小伙伴可以和小编一起学习一下
2023-02-02
js读取json的两种常用方法示例介绍
js读取json的方法或许很多，但常用的就那两种，本文以示例代码的方式为大家介绍下其具体的实现
2014-10-10
使用js在页面中绘制表格核心代码
在页面中绘制表格可以满足我们对数据的输入需求，在js中可以很容易实现，下面有个不错的示例，感兴趣的朋友可以参考下
2013-09-09
Javascript 继承实现例子
在真正的Web站点和应用程序中，几乎不可能创建名为ClassA和ClassB的类，更可能的是创建表示特定事物（如形状）的类。考虑本章开头所述的形状的例子，Polygon、Triangle和Rectangle类就构成了一组很好的探讨数据。
2009-08-08
js实现随屏幕滚动的带缓冲效果的右下角广告代码
这篇文章主要介绍了js实现随屏幕滚动的带缓冲效果的右下角广告代码,涉及javascript基于数学运算及定时函数动态操作页面元素的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
js实现秒表计时器
这篇文章主要为大家详细介绍了js实现秒表计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
js小数计算小数点后显示多位小数的实现方法
下面小编就为大家带来一篇js小数计算小数点后显示多位小数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05