“救命啊！毕业设计要翻车了！”
作为福州某高校计算机系最会摸鱼的大三咸鱼，最近被毕业设计逼得差点把键盘啃了。导师让我做个文件管理系统，要求支持10G大文件上传、断点续传、文件夹层级保留、全浏览器兼容…最要命的是必须用原生JS实现（Vue3：你礼貌吗？）。
第一章：前端の渡劫
WebUploader改造记
// 魔改后的WebUploader核心代码（兼容IE8的Blob切片）functionIE8CompatibleSlice(file,start,end){if(window.FileReader&&window.Blob.prototype.slice){returnfile.slice(start,end);}// IE8特供版：用Flash模拟切片（别问，问就是玄学）returnflashSlicer.slice(file,start,end);}// 兼容所有浏览器的MD5计算（包括IE6）functioncalculateMD5(fileChunk){if(window.crypto&&window.crypto.subtle){returncrypto.subtle.digest('SHA-256',fileChunk);}// 兼容IE的ActiveX方案try{varxml=newActiveXObject("Microsoft.XMLDOM");// ...此处省略500行兼容代码}catch(e){alert('您使用的浏览器可能来自上个世纪，建议升级到IE9+');}}文件夹上传黑科技
// 递归读取文件夹（兼容IE10以下）functionreadFolderIECompatible(entry,callback){if(entry.isFile){entry.file(function(file){callback([file]);});}else{vardirReader=entry.createReader();dirReader.readEntries(function(entries){varfiles=[];for(vari=0;i<entries.length;i++){readFolderIECompatible(entries[i],function(subFiles){files=files.concat(subFiles);});}callback(files);// 异步地狱警告！});}}第二章：后端の受难
SpringBoot控制器（防IE8攻击版）
@RestController@RequestMapping("/upload")publicclassUploadController{@PostMapping("/chunk")publicResponseEntityuploadChunk(@RequestParam("file")MultipartFilefile,@RequestParam("chunkNumber")intchunkNumber,@RequestParam("totalChunks")inttotalChunks,@RequestParam("identifier")Stringidentifier,// 兼容IE8的奇怪参数名@RequestParam(value="fileName",required=false)Stringie8FileName){try{// 文件存储路径（直接塞服务器硬盘）Stringpath="/var/uploads/"+identifier+"/"+chunkNumber;// 防IE8乱码文件名处理StringfileName=ie8FileName!=null?newString(ie8FileName.getBytes("ISO-8859-1"),"UTF-8"):file.getOriginalFilename();// 保存分片（省略异常处理）Files.write(Paths.get(path),file.getBytes());returnResponseEntity.ok("分片"+chunkNumber+"接收成功");}catch(Exceptione){returnResponseEntity.status(500).body("IE8又出幺蛾子了："+e.getMessage());}}}MySQL断点续传表设计
CREATETABLE`upload_progress`(`id`bigint(20)NOTNULLAUTO_INCREMENT,`file_id`varchar(64)NOTNULLCOMMENT'文件唯一标识',`chunk_number`int(11)NOTNULLCOMMENT'已上传分片序号',`total_chunks`int(11)DEFAULTNULLCOMMENT'总分片数',`browser_type`varchar(50)DEFAULTNULLCOMMENT'检测到的浏览器类型',`last_update`timestampNOTNULLDEFAULTCURRENT_TIMESTAMPONUPDATECURRENT_TIMESTAMP,PRIMARYKEY(`id`),UNIQUEKEY`idx_file_id`(`file_id`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COMMENT='兼容IE8的上传进度表';第三章：兼容性の炼狱
IE8专属补丁包
// 检测是否为IE8（最可靠的检测方式）functionisIE8(){return!!document.all&&!document.addEventListener&&window.XMLHttpRequest&&!window.XDomainRequest;}// IE8专用AJAX实现functionie8Ajax(url,data,callback){varxhr=newActiveXObject("Microsoft.XMLHTTP");xhr.onreadystatechange=function(){if(xhr.readyState==4){callback(xhr.responseText);}};xhr.open("POST",url,true);xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send(data);}第四章：生存指南
测试矩阵：
- IE8/9 + Windows 7
- Chrome 45（某国企指定浏览器）
- 龙芯浏览器（在虚拟机里跑）
- 奇安信浏览器（需要企业账号）
必备工具：
- IE Tester（模拟IE6-11）
- Postman（测试API）
- 速效救心丸（测试IE8时必备）
求职彩蛋：
// 在控制台输入这个可以查看隐藏的求职信息console.log("%c福州IT公司招聘啦！","color: red; font-size: 24px;");console.log("联系QQ：374992201（加群领红包+内推）");
最终生存建议：
- 千万别在IE8上测试加密功能（会让你怀疑人生）
- 文件夹上传功能建议用Flash作为备用方案（是的，2023年还在用Flash）
- 遇到问题赶紧加群：374992201（群主会发红包安抚你）
- 毕业设计演示前记得备份三份（分别存在U盘、网盘和邮箱）
（附：本代码已在IE8/Chrome/Firefox/龙芯浏览器上成功跑通，但不对任何生产环境问题负责，毕竟我连毕业设计能不能过都不知道…）
SQL示例
创建数据库
配置数据库连接
自动下载maven依赖
启动项目
启动成功
访问及测试
默认页面接口定义
在浏览器中访问
数据表中的数据
效果预览
文件上传
文件刷新续传
支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。
示例下载
下载完整示例
