文件上传需前后端配合，前端用js实现文件选择、读取、数据构建和请求发送。1. 使用选择文件，通过监听change事件获取file对象，读取文件名、大小、类型等信息。2. 利用filereader读取文件内容，支持readasdataurl（图片预览）、readastext（文本读取）、readasarraybuffer（二进制处理）等方式。3. 使用formdata对象构建上传数据，通过append方法添加文件和其他字段。4. 发送请求可使用xmlhttprequest或fetch api，前者支持进度监听，后者语法更简洁。5. 通过xhr.upload.onprogress事件实时获取上传进度，计算已上传字节数与总字节数的比例。6. 常见问题包括跨域（需设置cors）、文件大小和类型限制（前后端双重校验）、上传慢（采用分片上传）、中断续传（记录上传块）。7. 优化体验包括实现图片预览、进度条展示、友好错误提示、拖拽上传和多文件批量上传。完整流程由用户选择文件开始，经前端处理后发送至服务器，后端保存并返回结果，最终完成文件上传功能。
文件上传，简单来说，就是把客户端的文件发送到服务器，然后服务器保存起来。这事儿，JS肯定得参与，但光靠JS还不够，得前后端配合。
文件上传，前端JS主要负责选择文件、读取文件信息、构建上传数据，然后用XMLHttpRequest或者Fetch API发送请求。后端则负责接收文件数据、存储文件，并返回结果。
怎么用JS选择文件？
最常见的就是
标签。用户点击这个标签，浏览器会弹出文件选择对话框。
这段代码监听了
change事件，当用户选择了文件，就能获取到
File对象，里面包含了文件名、大小、类型等信息。注意
event.target.files是一个
FileList对象，里面包含了所有选中的文件，通常我们只取第一个。
如何读取文件内容？
有时候，我们需要在上传前读取文件内容，比如预览图片、校验文件格式等。可以使用
FileReader对象。
const reader = new FileReader();
reader.onload = (event) => {
// 文件读取完成，event.target.result 包含文件内容
console.log('文件内容：', event.target.result);
// 例如，如果是图片，可以创建一个img标签显示
const img = document.createElement('img');
img.src = event.target.result;
document.body.appendChild(img);
};
reader.onerror = (event) => {
console.error('文件读取出错：', event.target.error);
};
reader.readAsDataURL(file); // 将文件读取为Data URLFileReader提供了多种读取文件的方式：
readAsText(file, encoding)
: 将文件读取为文本字符串。readAsDataURL(file)
: 将文件读取为Data URL，常用于图片预览。readAsArrayBuffer(file)
: 将文件读取为ArrayBuffer
，用于处理二进制数据。readAsBinaryString(file)
(已废弃): 将文件读取为二进制字符串。
如何构建上传数据？
上传文件，通常使用
FormData对象。它可以模拟一个完整的表单，包含文件和其他数据。
const formData = new FormData();
formData.append('myFile', file); // 添加文件
formData.append('name', 'John Doe'); // 添加其他数据FormData对象使用
append()方法添加数据，第一个参数是字段名，第二个参数是字段值。对于文件，直接添加
File对象即可。
如何发送上传请求？
可以使用
XMLHttpRequest或者
Fetch API发送请求。
使用XMLHttpRequest：
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload'); // 上传接口地址
xhr.onload = () => {
if (xhr.status === 200) {
console.log('上传成功：', xhr.responseText);
} else {
console.error('上传失败：', xhr.statusText);
}
};
xhr.onerror = () => {
console.error('请求出错');
};
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
console.log('上传进度：', percentComplete.toFixed(2) + '%');
}
};
xhr.send(formData); // 发送FormData使用Fetch API：
fetch('/upload', {
method: 'POST',
body: formData,
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // 或者 response.text()
})
.then(data => {
console.log('上传成功：', data);
})
.catch(error => {
console.error('上传失败：', error);
});Fetch API 看起来更简洁，但需要注意处理错误情况。
如何显示上传进度？
XMLHttpRequest提供了
upload.onprogress事件，可以监听上传进度。
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
console.log('上传进度：', percentComplete.toFixed(2) + '%');
}
};event.loaded表示已上传的字节数，
event.total表示总字节数。
event.lengthComputable表示是否可以计算进度。
常见的上传问题和解决方案
-
跨域问题： 确保服务器允许跨域请求，设置
Access-Control-Allow-Origin
响应头。 - 文件大小限制： 前后端都要进行文件大小校验，避免上传过大的文件。
-
文件类型限制： 前端可以使用
file.type
校验文件类型，后端也要进行校验。 - 上传速度慢： 可以考虑分片上传，将大文件分割成小块，并行上传。
- 上传中断： 可以实现断点续传，记录已上传的块，下次继续上传未完成的块。
如何优化用户体验？
- 实时预览： 在用户选择文件后，立即显示预览，让用户确认选择是否正确。
- 进度条： 显示上传进度条，让用户了解上传状态。
- 友好的错误提示： 当上传失败时，给出明确的错误提示，帮助用户解决问题。
- 拖拽上传： 支持拖拽上传，让用户更方便地选择文件。
- 多文件上传： 支持多文件同时上传，提高效率。
总结
JS实现文件上传，涉及文件选择、读取、构建数据、发送请求等多个环节。需要前后端配合，才能实现完整的文件上传功能。同时，还需要考虑各种问题，例如跨域、文件大小限制、上传速度等，并进行优化，提升用户体验。
