一、普通文件上传
<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 来实现文件上传，具体实现方法可以参考相关文档。
二、大文件上传
分块上传的方式。将大文件分成若干个块，每块一个 HTTP 请求上传。
- 用户选择文件。
- 将文件分成若干块。
- 对于每一块，向服务器发送 HTTP 请求上传。
- 服务器接收到文件块后，将其存储在服务器上。
- 在所有块上传完成后，服务器将所有块合并成一个完整的文件。
JavaScript 可以使用 File API（File 和 Blob 对象）来实现文件的读取和上传。
<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 消息头表示上传的文件块的范围。
注意，这只是一个简单的实例，代码仅供参考，在实际应用中还需要考在考虑以下几点：
- 如果服务器端支持断点续传，可以在服务器端记录已经上传的文件块，避免重复上传。
- 需要考虑如何处理上传失败的文件块，是否需要重试。
- 在上传过程中需要提供进度条，让用户了解上传进度。
- 在上传完成后需要有反馈，告知用户上传是否成功。
- 服务器端如何处理上传的文件块，将其合并成一个完整的文件。
- 服务器端存储空间的问题。可以使用分布式文件系统（如 HDFS）或云存储（如 Amazon S3）来存储上传的文件。
- 文件块上传顺序、文件块校验、断点续传等问题。
- resumable.js
- plupload
- fine-uploader
- tus-js-client
这些库都提供了文件分块、断点续传、上传进度等功能，可以让你更快捷地实现大文件上传。
关于文件上传需要了解的知识点：
- HTML5 文件上传
- 文件上传技术
- 文件上传安全性
- 分块上传
- 断点续传
- 云存储