先实现文件选择与上传核心功能，再扩展进度反馈、错误处理与配置化。通过监听input的change事件获取文件，使用FormData和fetch上传，结合XMLHttpRequest的onprogress实现进度条，封装为支持自定义参数（如上传地址、大小限制）的类，提供addFile、start等方法，内置文件校验，兼容现代浏览器并优化性能，逐步支持断点续传与并发控制。
开发一个JavaScript文件上传插件，核心在于实现文件选择、上传控制、进度反馈、错误处理和兼容性优化。一个实用的插件应轻量、可配置、支持多文件、断点续传（进阶）并适配现代浏览器。以下是功能实现与优化的关键步骤。
基础功能：文件选择与上传
通过监听input元素的change事件获取用户选择的文件，使用FormData和XMLHttpRequest或fetch发送请求。
关键实现：
- 绑定input[type=file]的change事件，读取event.target.files
- 遍历文件列表，为每个文件创建FormData实例，附加文件数据
- 使用XMLHttpRequest发送POST请求，设置请求头（如需）
- 上传成功后触发回调，通知调用者结果
示例代码片段：
立即学习“Java免费学习笔记（深入）”；
const input = document.getElementById('fileInput');
input.addEventListener('change', function() {
const files = this.files;
for (let i = 0; i < files.length; i++) {
uploadFile(files[i]);
}
});
function uploadFile(file) {
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log('上传成功:', data))
.catch(err => console.error('上传失败:', err));
}
增强用户体验：进度与状态反馈
上传大文件时，用户需要知道当前进度。利用XMLHttpRequest的onprogress事件可实时获取上传进度。
实现方式：
- 在send()前为xhr对象绑定upload.onprogress事件
- 从事件对象中提取loaded和total字节数，计算百分比
- 更新UI中的进度条或文字提示
- 提供上传中、成功、失败等状态回调
示例：
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log(`上传进度: ${Math.round(percent)}%`);
}
};
插件封装与配置化设计
将功能封装成可复用的插件，支持自定义参数，提升灵活性。
建议接口设计：
- 接受配置对象：上传地址、文件类型限制、最大数量、大小限制等
- 暴露方法：init(), addFile(), start(), cancel()
- 支持事件监听：onProgress, onSuccess, onError, onValidate
- 内置文件校验：根据accept属性或配置检查type/size
简单构造函数示例：
class FileUploader {
constructor(options) {
this.url = options.url;
this.maxSize = options.maxSize || 5 * 1024 * 1024; // 默认5MB
this.accept = options.accept || '';
}
addFile(file) {
if (file.size > this.maxSize) {
this.onError && this.onError('文件过大');
return;
}
this.upload(file);
}
}
性能与兼容性优化
实际应用中需考虑稳定性与广泛可用性。
优化建议：
- 使用FileReader预览图片类文件，提升交互体验
- 对IE10+做兼容处理，避免使用ES6+新语法或提供polyfill
- 支持分片上传（大文件场景），配合服务端实现断点续传
- 增加并发控制，避免同时上传过多文件导致阻塞
- 提供取消上传功能，调用xhr.abort()
基本上就这些。一个实用的上传插件不需要一开始就功能齐全，先实现核心上传流程，再逐步添加校验、进度、配置等特性，保持代码清晰可维护最重要。
