js实现文件的上传
文件上传的基本实现
使用HTML的<input type="file">元素配合JavaScript的File API可以实现文件上传功能。HTML部分需要包含一个文件选择控件和一个提交按钮：
<input type="file" id="fileInput">
<button id="uploadButton">上传</button>JavaScript部分通过监听按钮点击事件获取文件：
document.getElementById('uploadButton').addEventListener('click', function() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (file) {
console.log('已选择文件:', file.name);
// 上传逻辑
} else {
console.log('未选择文件');
}
});使用FormData上传文件
通过FormData对象可以方便地构建表单数据，适合配合XMLHttpRequest或fetch API进行文件上传：
const formData = new FormData();
formData.append('file', file); // 'file'是后端接收的字段名
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log('上传成功:', data))
.catch(error => console.error('上传失败:', error));显示上传进度
XMLHttpRequest对象提供了progress事件，可以实时显示上传进度：
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
console.log(`上传进度: ${percent}%`);
}
});
xhr.open('POST', '/upload', true);
xhr.send(formData);多文件上传实现
通过设置input的multiple属性允许选择多个文件，并遍历上传：
<input type="file" id="multiFileInput" multiple>const files = document.getElementById('multiFileInput').files;
Array.from(files).forEach(file => {
const fileFormData = new FormData();
fileFormData.append('files', file); // 注意字段名可能需改为复数形式
fetch('/multi-upload', {
method: 'POST',
body: fileFormData
});
});文件类型和大小验证
在上传前进行客户端验证可以提高用户体验：
const MAX_SIZE = 5 * 1024 * 1024; // 5MB
const ALLOWED_TYPES = ['image/jpeg', 'image/png'];
if (!ALLOWED_TYPES.includes(file.type)) {
alert('仅支持JPEG和PNG格式');
return;
}
if (file.size > MAX_SIZE) {
alert('文件大小不能超过5MB');
return;
}使用第三方库简化操作
对于复杂需求，可以考虑使用现成的库如Dropzone.js或Uppy：
<!-- Dropzone.js示例 -->
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css">
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<div id="myDropzone" class="dropzone"></div>
<script>
Dropzone.options.myDropzone = {
url: "/upload",
maxFilesize: 5, // MB
acceptedFiles: "image/*"
};
</script>处理跨域问题
如果API位于不同域名下，需要确保后端设置了CORS头部：
fetch('https://api.example.com/upload', {
method: 'POST',
body: formData,
mode: 'cors',
headers: {
// 其他必要头部
}
});安全注意事项
- 始终在后端验证文件类型和内容
- 对上传文件进行重命名，避免路径遍历攻击
- 设置合理的文件大小限制
- 考虑使用CSRF令牌保护上传端点
