前端大文件上传系统纯原生JS实现—— 专治各种不服IE9的倔强开发者各位前端老炮儿们今天给大家带来一个能兼容IE9的20G大文件上传系统保证让你的客户感动到哭或者吓跑。毕竟在这个Vue3横行的时代我们还要用原生JS伺候IE9这位上古神兽这感觉就像开着法拉利去犁地。完整前端实现纯原生JS版上古浏览器兼容型大文件上传系统 body { font-family: Microsoft YaHei, sans-serif; margin: 20px; } .progress-container { width: 100%; background: #f0f0f0; margin: 10px 0; } .progress-bar { height: 20px; background: #4CAF50; width: 0%; text-align: center; line-height: 20px; color: white; } .file-list { margin-top: 20px; border: 1px solid #ddd; padding: 10px; max-height: 300px; overflow-y: auto; } .file-item { padding: 5px; border-bottom: 1px solid #eee; } .folder-toggle { cursor: pointer; color: blue; } .hidden { display: none; } .ie9-warning { background: #ffeb3b; padding: 10px; margin-bottom: 20px; } 上古浏览器兼容型大文件上传系统 选择文件/文件夹 开始上传 下载文件 0% // 全局变量区上古神器专用 var fileQueue []; var chunkSize 5 * 1024 * 1024; // 5MB分片 var uploadId ; var currentFileIndex 0; var isUploading false; var sm4Key 1234567890abcdef; // 简单加密密钥实际项目请使用更安全的方案 // 兼容IE9的文件选择使用Flash回退方案这里简化处理 document.getElementById(selectBtn).addEventListener(click, function() { // 现代浏览器使用input[typefile]的webkitdirectory属性 var input document.createElement(input); input.type file; input.multiple true; // 检测是否支持文件夹选择非IE或IE10 if (webkitdirectory in input || directory in input) { input.webkitdirectory true; // Chrome/Firefox/Edge // input.directory true; // Opera } else { // IE9及以下处理实际项目需要Flash或ActiveX控件 alert(您的浏览器不支持文件夹选择请手动选择文件IE9用户请哭一会儿); } input.onchange function(e) { handleFiles(e.target.files); }; input.click(); }); // 处理选择的文件 function handleFiles(files) { fileQueue []; var fileListDiv document.getElementById(fileList); fileListDiv.innerHTML ; // 递归处理文件夹结构IE9没有Files API的完整支持这里简化处理 for (var i 0; i files.length; i) { var file files[i]; var relativePath getRelativePath(file); // 简化处理实际需要更复杂的路径解析 fileQueue.push({ file: file, relativePath: relativePath, chunks: Math.ceil(file.size / chunkSize), uploadedChunks: 0, status: pending }); // 显示文件信息 var fileItem document.createElement(div); fileItem.className file-item; fileItem.innerHTML span relativePath /span( formatFileSize(file.size) ); fileListDiv.appendChild(fileItem); } document.getElementById(uploadBtn).disabled fileQueue.length 0; } // 简化版路径处理实际项目需要更复杂的实现 function getRelativePath(file) { // 现代浏览器支持webkitRelativePath if (file.webkitRelativePath) { return file.webkitRelativePath; } // IE9及以下...祝你好运 return file.name; } // 开始上传 document.getElementById(uploadBtn).addEventListener(click, function() { if (isUploading) return; isUploading true; currentFileIndex 0; uploadNextFile(); }); // 上传下一个文件 function uploadNextFile() { if (currentFileIndex fileQueue.length) { isUploading false; alert(所有文件上传完成); return; } var fileItem fileQueue[currentFileIndex]; if (fileItem.status ! pending) { currentFileIndex; uploadNextFile(); return; } // 初始化上传实际项目需要从后端获取uploadId // 这里简化处理实际需要先调用初始化接口 uploadId temp-upload-id- Date.now(); // 开始分片上传 uploadFileInChunks(fileItem); } // 分片上传文件 function uploadFileInChunks(fileItem) { var file fileItem.file; var chunks fileItem.chunks; function uploadChunk(chunkIndex) { if (chunkIndex chunks) { // 所有分片上传完成 fileItem.status completed; currentFileIndex; updateProgress(); uploadNextFile(); return; } if (chunkIndex fileItem.uploadedChunks) { // 已经上传过的分片 uploadChunk(chunkIndex 1); return; } var start chunkIndex * chunkSize; var end Math.min(start chunkSize, file.size); var chunk file.slice(start, end); // 简单加密实际项目请使用Web Crypto API或加密库 var encryptedChunk simpleEncrypt(chunk, sm4Key); // 创建FormData兼容IE9 var formData new FormData(); formData.append(file, encryptedChunk, chunk- chunkIndex); formData.append(uploadId, uploadId); formData.append(chunkIndex, chunkIndex); formData.append(totalChunks, chunks); formData.append(fileName, file.name); formData.append(relativePath, fileItem.relativePath); formData.append(fileSize, file.size); // 创建XMLHttpRequest兼容IE9 var xhr new XMLHttpRequest(); xhr.open(POST, /api/upload, true); // 实际项目替换为你的后端接口 xhr.onload function() { if (xhr.status 200) { fileItem.uploadedChunks; updateProgress(); uploadChunk(chunkIndex 1); } else { // 上传失败稍后重试 setTimeout(function() { uploadChunk(chunkIndex); }, 1000); } }; xhr.onerror function() { // 网络错误稍后重试 setTimeout(function() { uploadChunk(chunkIndex); }, 1000); }; xhr.send(formData); } uploadChunk(0); } // 简单加密函数仅示例实际项目请使用标准加密库 function simpleEncrypt(data, key) { // 这里应该是真正的加密实现 // 为了示例我们只是返回原始数据 console.log(应该加密数据但实际没有实现:, data, key); return data; } // 更新进度条 function updateProgress() { var totalChunks 0; var uploadedChunks 0; fileQueue.forEach(function(item) { if (item.status completed) { uploadedChunks item.chunks; } else { uploadedChunks item.uploadedChunks; } totalChunks item.chunks; }); var progress totalChunks 0 ? Math.round((uploadedChunks / totalChunks) * 100) : 0; document.getElementById(progressBar).style.width progress %; document.getElementById(progressBar).textContent progress %; } // 下载功能简化版 document.getElementById(downloadBtn).addEventListener(click, function() { // 实际项目需要从后端获取文件列表 alert(下载功能需要后端支持这里只是示例); // 示例下载单个文件实际需要处理文件夹结构 // window.location.href /api/download?fileId123; }); // 辅助函数格式化文件大小 function formatFileSize(bytes) { if (bytes 0) return 0 Bytes; var k 1024; var sizes [Bytes, KB, MB, GB, TB]; var i Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) sizes[i]; } // 兼容IE9的console.log如果控制台未打开 if (!window.console) { window.console { log: function() {} }; } // 初始化时检查本地存储的上传进度实际项目需要更复杂的实现 function checkLocalProgress() { // 这里可以添加localStorage或IndexedDB的实现来保存上传进度 console.log(应该检查本地存储的上传进度但实际没有实现); } checkLocalProgress();项目说明免责声明版IE9兼容性这个代码在IE9上能运行但文件夹上传功能会退化为文件选择因为IE9不支持文件夹选择API。要真正兼容IE9的文件夹上传你需要使用Flash或ActiveX控件已过时说服客户升级浏览器推荐方案或者开发一个客户端应用预算100元不够加密功能示例中的simpleEncrypt函数只是占位符实际项目请使用Web Crypto API现代浏览器CryptoJS等加密库或者让后端处理加密推荐断点续传示例中简化了实现实际需要后端支持分片校验本地存储上传进度使用localStorage或IndexedDB更复杂的错误处理和重试机制20G文件支持这个示例能工作但实际项目需要考虑内存管理大文件分片加载超时处理服务器配置Nginx/Apache的超时设置预算说明100元预算开发这个系统相当于用自行车轮子造火箭用算盘计算量子物理建议至少增加2-3个零的预算加入我们的接单群虽然我不能免费帮你完成整个项目但欢迎加入我们的前端接单群QQ群374992201在这里你可以找到一起开发项目的伙伴分享技术资源和外包机会参与我们的推荐返现活动真的有钱拿领取入群红包1-99元看运气记住在编程的世界里没有免费的午餐但有免费的群聊和偶尔的红包将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。批量下载支持文件批量下载下载续传文件下载支持离线保存进度信息刷新页面关闭页面重启系统均不会丢失进度信息。文件夹下载支持下载文件夹并保留层级结构不打包不占用服务器资源。下载示例点击下载完整示例