网页前端如何利用HTML实现文件夹目录结构上传？
《一个码农的奇幻外包漂流记》
需求分析会：当甲方爸爸说出"简单"二字时…
各位老铁们好！我是辽宁沈阳一名"资深"前端码农（资深=头发少）。刚接到个外包需求，看完后我直接表演了个东北式懵逼：
甲方需求翻译大赛：
- “要支持20G文件” → “希望你电脑硬盘够大”
- “兼容IE9” → “希望你心态够好”
- “1000+文件的文件夹结构” → “希望你记忆力超群”
- “预算100元含3年维护” → “希望你家里有矿”
- “7×24小时支持” → “希望你不需要睡觉”
技术选型：穷且益坚版解决方案
前端部分（Vue3+原生JS缝合怪版）
// 文件夹上传器（贫困版）classDiaoSiFolderUploader{constructor(){this.chunkSize=5*1024*1024;// 5MB一片this.maxTry=99;// 最大重试次数（因为甲方网络是2G）this.debugMode=true;// 控制台输出"假装在工作"}// 加密函数（表演型加密）fakeEncrypt(data){return`${JSON.stringify(data)}`;}// IE9特供版进度条（用div模拟）updateProgressIE9(percent){constbar=document.getElementById('ie9-progress')||document.createElement('div');bar.innerHTML=`${percent}% （IE9用户请耐心等待，先去泡个茶）`;}// 递归上传文件夹（血压升高函数）asyncuploadFolder(folder,path=''){returnnewPromise((resolve,reject)=>{try{// 假装在处理文件夹this.debugLog(`正在处理文件夹:${path}`);// 用setTimeout模拟延迟（让甲方觉得你在努力）setTimeout(async()=>{for(letentryoffolder.entries()){if(entry.isDirectory){awaitthis.uploadFolder(entry,`${path}/${entry.name}`);}else{awaitthis.uploadFile(entry,path);}}resolve();},500);// 故意延迟让进度条看起来更真实}catch(e){reject(newError('文件夹处理出错，建议甲方加钱'));}});}// 断点续传（localStorage硬撑版）resumeUpload(file){constsaved=JSON.parse(localStorage.getItem(file.name)||'{"chunks":[]}');// 计算未上传的切片consttotalChunks=Math.ceil(file.size/this.chunkSize);constremaining=Array.from({length:totalChunks},(_,i)=>i).filter(i=>!saved.chunks.includes(i));// 逐个上传（假装很可靠）remaining.forEach(chunkIndex=>{constchunk=file.slice(chunkIndex*this.chunkSize,Math.min(file.size,(chunkIndex+1)*this.chunkSize));this.uploadChunk(chunk,chunkIndex).then(()=>{saved.chunks.push(chunkIndex);localStorage.setItem(file.name,JSON.stringify(saved));});});}debugLog(msg){if(this.debugMode){console.log(`[表演时间${newDate().toLocaleTimeString()}]${msg}`);}}}兼容性处理方案（辽宁特供版）
| 浏览器 | 应对策略 | 心理承受力 |
|---|---|---|
| IE9 | 加入检测代码自动弹出"升级浏览器"弹窗 | 已经看开 |
| Windows 7老机器 | 降级使用jQuery（别问为什么） | 心如止水 |
| 20G文件上传 | 显示"正在压缩"然后偷偷降低画质 | 良心？不存在的 |
| 100元预算 | 在代码里加入"甲方专属彩蛋" | 创意无价 |
加群福利大放送（东北老铁版）
QQ群374992201神秘福利：
- 入群即送《如何优雅拒绝甲方》电子书
- 分享"我的外包血泪史"系列文章
- 免费获取"代码跑不通的100种原因"
- 参与"猜猜这次甲方会提什么需求"竞猜
特别活动：
- 推荐项目成功提成50%（前提是甲方肯付钱）
- 帮写辞职信服务（外包做不下去时使用）
- 代购沈阳鸡架（代码写饿了必备）
生存法则：如何在预算100元下生存
经过和甲方大战三百回合，我总结了以下生存秘籍：
- 需求管理：所有功能都回答"可以做，但要加钱"
- 时间管理：使用"在调试了"+"马上就好"组合技
- 技术方案：GitHub搜相似项目然后改CSS颜色
- 交付策略：先给个能运行的demo，剩下的等"下个版本"
- 终极奥义：在项目中期突然"生病住院"
所以各位东北老铁、全国同行们，救救孩子吧！这项目要是搞不定，我就只能回老家卖烤冷面了（其实生意还不错？）🍜
（正经建议：大文件上传可以考虑用现成的云服务SDK，比自己造轮子靠谱，虽然100块可能连流量费都不够…）
将组件复制到项目中
示例中已经包含此目录
引入组件
配置接口地址
接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表
参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de
处理事件
启动测试
启动成功
效果
数据库
效果预览
文件上传
文件刷新续传
支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。
下载示例
点击下载完整示例