前端老兵的20G文件夹上传血泪史附部分代码各位前端同仁们好我是老王一个在福建靠写代码混口饭吃的前端民工。最近接了个奇葩项目客户要求用原生JS实现20G文件夹上传下载还要兼容IE9这简直是要了我这把老骨头的命啊项目奇葩需求大赏20G文件传输客户说他们每天要传大量资料我第一反应是您这是要传整个互联网吗文件夹层级保留要求上传1000个分类的文件还要保持结构这比整理我家衣柜还难加密传输存储SM4AES双加密我怀疑客户在搞什么国家机密断点续传关闭浏览器、重启电脑都不能丢进度这比记住女朋友生日还难非打包下载几万个文件单独下载这是要测试我家网速吗100元预算是的你没看错100块连我喝咖啡的钱都不够免费3年维护客户说年轻人要讲武德我差点把键盘吃了文件夹上传技术实现部分代码经过我日夜奋战其实是熬夜掉头发终于搞定了文件夹上传的核心功能。以下是部分原生JS实现代码20G文件夹上传神器IE9兼容版 .upload-container { padding: 20px; font-family: Microsoft YaHei, sans-serif; } .progress-container { margin-top: 20px; border: 1px solid #ddd; padding: 10px; } .file-tree { margin-top: 20px; border: 1px solid #eee; padding: 10px; max-height: 300px; overflow-y: auto; } 文件夹上传系统IE9兼容版 选择文件夹 上传进度: 0% 文件夹结构: // 全局变量存储文件信息IE9兼容的存储方案 const fileStorage { files: [], currentChunk: 0, totalChunks: 0, uploadId: null, // 模拟本地存储IE9没有localStorage的完整实现 save: function(key, value) { try { if (window.localStorage) { localStorage.setItem(key, JSON.stringify(value)); } else { // IE9兼容方案 - 使用userData或cookie这里简化处理 document.cookie key encodeURIComponent(JSON.stringify(value)) ; path/; } } catch (e) { console.error(存储失败:, e); } }, load: function(key) { try { if (window.localStorage) { const value localStorage.getItem(key); return value ? JSON.parse(value) : null; } else { // IE9兼容方案 const name key ; const ca document.cookie.split(;); for(let i0; ica.length; i) { let c ca[i]; while (c.charAt(0) ) c c.substring(1); if (c.indexOf(name) 0) return JSON.parse(decodeURIComponent(c.substring(name.length, c.length))); } return null; } } catch (e) { console.error(读取失败:, e); return null; } } }; // 处理文件夹选择 document.getElementById(folderInput).addEventListener(change, function(e) { const files e.target.files; if (!files || files.length 0) return; // 构建文件树结构 const fileTree buildFileTree(files); document.getElementById(fileTree).innerHTML renderFileTree(fileTree, ); // 存储文件信息用于后续上传 fileStorage.files Array.from(files).map(file ({ name: file.webkitRelativePath || file.name, size: file.size, type: file.type, lastModified: file.lastModified, chunks: Math.ceil(file.size / (1024 * 1024)) // 每块1MB })); // 初始化上传状态 fileStorage.totalChunks fileStorage.files.reduce((sum, file) sum file.chunks, 0); fileStorage.currentChunk 0; fileStorage.uploadId Date.now() - Math.random().toString(36).substr(2); // 保存上传状态 fileStorage.save(uploadState_ fileStorage.uploadId, { files: fileStorage.files, currentChunk: 0, totalChunks: fileStorage.totalChunks }); }); // 构建文件树简化版 function buildFileTree(files) { const tree {}; Array.from(files).forEach(file { const pathParts (file.webkitRelativePath || file.name).split(/); let currentLevel tree; pathParts.forEach((part, index) { if (index pathParts.length - 1) { // 文件节点 currentLevel[part] { isFile: true, size: file.size, type: file.type }; } else { // 目录节点 if (!currentLevel[part]) { currentLevel[part] {}; } currentLevel currentLevel[part]; } } }); }); return tree; } // 渲染文件树简化版 function renderFileTree(tree, path) { let html ul; for (const key in tree) { const node tree[key]; const currentPath path ? path / key : key; if (node.isFile) { html li${key} (${formatFileSize(node.size)})/li; } else { html listrong${key}//strong; html renderFileTree(node, currentPath); html /li; } } html /ul; return html; } // 格式化文件大小 function formatFileSize(bytes) { if (bytes 0) return 0 Bytes; const k 1024; const sizes [Bytes, KB, MB, GB, TB]; const i Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) sizes[i]; } // 模拟上传过程实际项目中需要替换为真实的AJAX请求 function startUpload() { if (fileStorage.files.length 0) return; // 这里应该实现分块上传逻辑 // 由于篇幅限制只展示进度更新部分 const interval setInterval(() { fileStorage.currentChunk; const progress Math.min(100, Math.round((fileStorage.currentChunk / fileStorage.totalChunks) * 100)); document.getElementById(progressText).textContent progress %; document.getElementById(uploadProgress).value progress; // 保存进度 fileStorage.save(uploadProgress_ fileStorage.uploadId, { progress: progress, currentChunk: fileStorage.currentChunk, totalChunks: fileStorage.totalChunks }); if (progress 100) { clearInterval(interval); alert(上传完成(模拟)); } }, 500); // 模拟上传速度 } // 页面加载时检查是否有未完成的上传 window.onload function() { // 这里应该检查所有可能的uploadId并恢复上传 // 简化处理只检查一个示例 const savedState fileStorage.load(uploadProgress_example123); if (savedState savedState.progress 0 savedState.progress 100) { if (confirm(检测到未完成的上传是否继续)) { document.getElementById(progressText).textContent savedState.progress %; document.getElementById(uploadProgress).value savedState.progress; // 实际项目中需要恢复上传状态 } } };开发过程中的血泪教训IE9兼容性文件夹上传需要使用webkitdirectory属性但IE不支持最终解决方案告诉客户升级浏览器或使用Chrome框架大文件处理20G文件不能一次性读取到内存必须分块使用了File API的slice方法实现分块断点续传使用localStorage/cookie存储上传进度IE9兼容方案实际项目中应该使用IndexedDB或后端存储加密传输使用了crypto-js库实现AES加密但客户预算100元买不起库最终解决方案让后端同学实现加密文件夹结构保留使用webkitRelativePath获取文件相对路径构建树形结构存储文件夹层级真诚建议各位同行遇到这种项目请慎重考虑100元预算连买杯星巴克都不够免费维护3年不如直接让我给你打工20G文件传输在浏览器端实现这是要发明新的互联网协议吗加入我们的接单群虽然这个项目让我掉了一把头发但我还是决定继续在前端这条路上走下去。欢迎加入我们的接单群374992201群内福利加群送1-99元红包推荐项目拿20%提成超级会员享50%提成不定期分享技术资源和接单技巧最后说一句前端不易且行且珍惜。如果这个项目能做下来我考虑转行去卖生发液了…将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例