我一个被大文件上传“折磨”到想秃头的PHP程序员想和你唠唠这事儿最近接了个外包项目客户是做本地档案馆数字化的老板拍着桌子说“小老弟咱们这系统得支持20G文件夹上传用户每天传几千份资料都是带1000个分类的文件夹你得给我整明白——文件夹层级不能乱断网重启能续传加密存储还便宜”得需求明确了原生JS实现别整框架、20G文件夹上传保留层级、IE8兼容、加密传输存储、断点续传、PHP后端、预算100元内。我熬了三个大夜翻遍了GitHub和百度终于整出一套“能跑能扛”的方案——今天全掏给你省得你再踩坑一、需求拆解这活儿到底难在哪儿先理清楚客户的“刚需”咱们一条条啃需求维度关键点难点吐槽文件夹上传保留层级1000个分类、非打包下载开源组件如WebUploader停更不支持IE8文件夹层级全靠手动模拟头都大了大文件传输20G文件、断点续传关浏览器/重启电脑不丢进度IE8不支持FormData分片上传得用XMLHttpRequest.sendAsBinary内存容易爆加密合规传输HTTPS存储SM4/AES可配置客户要国密SM4PHP的SM4扩展得自己编译AES密钥管理不能硬编码得存配置文件兼容性IE8、主流浏览器、Windows/Linux/macOSIE8的File对象兼容性差localStorage容量只有5MB得省着用成本预算100元内、免费代码文档、7*24小时支持网上代码全是“残次品”找个能跑的文件夹上传示例比登天还难外包报价高自己搞更划算二、技术方案用“土办法”解决“高难度”1. 架构设计前端“土分片” 后端“土存储”没啥高大上的架构就用最朴素的方式前端把文件夹拆成“文件相对路径”分片上传后端存分片记录路径合并时按路径拼。核心逻辑文件夹上传用户选文件夹IE8手动输入路径前端递归遍历文件记录每个文件的“相对路径”如/文档/报告/2024.docx。分片上传每个文件切5MB分片IE8内存扛不住太大的片上传时带“文件哈希分片索引”服务端存分片到临时目录。断点续传用localStorage存已上传分片索引IE8支持上传前查进度跳过已传的分片。加密存储传输层强制HTTPS存储层用AES加密SM4需要PHP扩展客户预算有限先上AES密钥存config.php。非打包下载下载时按路径遍历文件逐个输出避免打包导致内存爆炸。三、前端代码原生JS搞定文件夹上传兼容IE81. 文件夹上传核心逻辑HTMLJS大文件上传兼容IE8 上传文件夹保留层级 开始上传 进度0% // 兼容IE8的工具函数ES5语法 var utils { // 生成唯一文件IDMD5IE8需引入crypto-js getFileId: function(file) { var reader new FileReader(); reader.onload function(e) { var wordArray CryptoJS.lib.WordArray.create(e.target.result); return CryptoJS.MD5(wordArray).toString(); }; reader.readAsArrayBuffer(file); // IE8用readAsBinaryString需特殊处理 }, // 遍历文件夹递归记录相对路径 traverseFolder: function(files, basePath, callback) { for (var i 0; i files.length; i) { var file files[i]; var relativePath basePath ? basePath / file.name : file.name; if (file.webkitRelativePath) { // 现代浏览器直接获取相对路径 callback(file, relativePath); } else { // IE8手动输入路径弹窗提示 var path prompt(请输入 file.name 的相对路径如文档/报告/, basePath); callback(file, path); } // 递归处理子文件夹假设用户选了嵌套文件 if (file.files) { this.traverseFolder(file.files, relativePath, callback); } } }, // 分片上传兼容IE8的XMLHttpRequest uploadChunk: function(url, chunk, fileId, chunkIndex, totalChunks, callback) { var xhr new XMLHttpRequest(); xhr.open(POST, url, true); xhr.setRequestHeader(Content-Type, application/octet-stream); xhr.setRequestHeader(X-File-Id, fileId); xhr.setRequestHeader(X-Chunk-Index, chunkIndex); xhr.setRequestHeader(X-Total-Chunks, totalChunks); xhr.onreadystatechange function() { if (xhr.readyState 4 xhr.status 200) { callback(JSON.parse(xhr.responseText)); } }; xhr.send(chunk); // IE8用sendAsBinary需处理Blob } }; // 上传文件夹主逻辑 function uploadFolder() { var input document.getElementById(fileInput); var files input.files; if (files.length 0) { alert(请选择文件夹); return; } // 生成全局唯一文件ID防重复 var fileId utils.getFileId(files[0]); // 简单示例实际需遍历所有文件 var uploadedChunks JSON.parse(localStorage.getItem(fileId)) || []; // 从localStorage读进度 // 遍历文件记录相对路径现代浏览器自动处理IE8弹窗 utils.traverseFolder(files, , function(file, relativePath) { // 计算分片 var chunkSize 5 * 1024 * 1024; // 5MB/片 var totalChunks Math.ceil(file.size / chunkSize); var currentChunk 0; // 上传分片跳过已传的 function uploadNextChunk() { if (currentChunk totalChunks) { alert(文件上传完成); return; } if (uploadedChunks.indexOf(currentChunk) ! -1) { currentChunk; uploadNextChunk(); return; } var start currentChunk * chunkSize; var end Math.min(start chunkSize, file.size); var chunk file.slice(start, end); // IE8用webkitSlice // 上传分片 utils.uploadChunk( /api/upload/chunk, chunk, fileId, currentChunk, totalChunks, function(res) { if (res.code 200) { uploadedChunks.push(currentChunk); localStorage.setItem(fileId, JSON.stringify(uploadedChunks)); // 保存进度 currentChunk; uploadNextChunk(); } else { alert(上传失败 res.msg); } } ); } uploadNextChunk(); }); }2. 下载功能非打包按路径输出// 下载按钮点击事件需后端配合functiondownloadFolder(folderId){window.open(/api/download/folder?folderIdfolderId);// 后端按路径遍历输出文件}四、后端PHP代码分片上传加密存储文件夹管理1. 分片上传接口处理上传请求200,msg分片上传成功]);?2. 合并分片接口生成最终文件200,msg文件合并成功,path$mergedFile]);?// AES加密函数需安装openssl扩展functionaes_encrypt($data,$key){$ivopenssl_random_pseudo_bytes(16);$encryptedopenssl_encrypt($data,AES-256-CBC,$key,0,$iv);returnbase64_encode($iv.$encrypted);// 存储IV密文}?3. 文件夹下载接口非打包输出五、数据库设计MySQL存文件夹层级和文件元数据预算有限用单表CREATETABLEfiles(idINTPRIMARYKEYAUTO_INCREMENT,folder_idVARCHAR(255)NOTNULLCOMMENT文件夹ID对应前端生成的fileId,file_nameVARCHAR(255)NOTNULLCOMMENT文件名,relative_pathVARCHAR(500)NOTNULLCOMMENT相对路径如文档/报告/,file_sizeBIGINTNOTNULLCOMMENT文件大小字节,encrypt_keyVARCHAR(32)NOTNULLCOMMENTAES密钥16/24/32字节,create_timeTIMESTAMPDEFAULTCURRENT_TIMESTAMPCOMMENT上传时间);六、兼容性与稳定性保障1. IE8兼容用XMLHttpRequest.sendAsBinary上传分片IE8不支持FormData。localStorage存已上传分片索引容量5MB足够存1000个分片索引。用prompt手动输入路径IE8不支持webkitdirectory。2. 断点续传前端上传前查localStorage跳过已传分片。服务端用文件记录已上传分片uploaded.txt重启后不丢失。3. 加密存储传输层强制HTTPS买个便宜的SSL证书一年几十块。存储层用AES-256-CBC密钥存config.php定期更换。七、预算与支持成本代码免费服务器用阿里云轻量应用服务器1核2G一年500块SSL证书一年50块总预算控制在600块内远低于100元不用户说预算100元内可能我超了但实际可以优化比如用免费SSL证书服务器用共享主机。支持提供7*24小时QQ群支持群号374992201群里有大神帮忙调试。文档附《部署指南》《常见问题排查》直接交给客户用。写在最后这活儿咱们能搞定从需求分析到代码落地从兼容性调试到加密合规我踩过IE8的坑、分片的坑、文件夹层级的坑现在把这套“能跑能扛”的方案掏出来——你直接拿去用改改配置就能上线要是你也遇到类似需求或者想组队接单欢迎加群QQ群374992201。群里有大神分享资源有项目一起合作没项目一起吹牛——毕竟程序员的日子互相搭把手才能走得更远最后小声说要是群里有人能搞出SM4加密的PHP扩展我分他一半项目钱导入项目导入到Eclipse点南查看教程导入到IDEA点击查看教程springboot统一配置点击查看教程工程NOSQLNOSQL示例不需要任何配置可以直接访问测试创建数据表选择对应的数据表脚本这里以SQL为例修改数据库连接信息访问页面进行测试文件存储路径up6/upload/年/月/日/guid/filename效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例