网页如何实现大文件上传的暂停与继续功能？

《一个通讯专业菜鸟的"10G文件上传"奇幻漂流记》

前情提要：毕业设计の绝望

大家好！我是福州某高校通讯专业大三"准失业人员"。眼瞅着要毕业了，导师说：“做个文件管理系统当毕设吧，找工作也有个作品！” 我心想这还不简单？直到我看到需求文档…

需求清单：

• 10G文件上传（我U盘才8G啊喂！）
• 支持IE8（这玩意儿比我年纪都大！）
• 断点续传要能抗关机（这需求是灭霸提的吧？）
• 免费7×24技术支持（导师您看我像慈善机构吗？）
• 预算：0元（还倒贴电费！）

技术选型：在作死的边缘试探

前端部分（Vue3 + 原生JS混合双打）

// 大文件分片上传示例（纯原生JS版）classBigFileUploader{constructor(){this.chunkSize=5*1024*1024;// 5MB一片this.offlineStorageKey='upload-progress';// 离线存储键名}// 加密分片（祖传Base64加密法）encryptChunk(chunk){returnbtoa(unescape(encodeURIComponent(chunk)));}// 拯救IE8的IndexedDB polyfillinitDB(){if(!window.indexedDB){alert('建议您换个现代浏览器，别为难自己了！');returnPromise.reject('IE8去死吧');}// 这里省略100行兼容代码...}// 断点续传核心逻辑resumeUpload(file){consttotalChunks=Math.ceil(file.size/this.chunkSize);letsavedProgress=localStorage.getItem(this.offlineStorageKey)||0;// 从断点开始上传for(leti=savedProgress;i<totalChunks;i++){constchunk=file.slice(i*this.chunkSize,(i+1)*this.chunkSize);this.uploadChunk(chunk,i).then(()=>{localStorage.setItem(this.offlineStorageKey,i+1);});}}}

后端部分（ASP.NET WebForm老古董版）

// 文件分片接收接口publicclassUploadHandler:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){// 处理来自石器时代IE8的请求if(context.Request.Browser.Browser=="IE"&&context.Request.Browser.MajorVersion<=8){context.Response.Write("{\"error\":\"建议您换个现代浏览器\"}");return;}try{varfile=context.Request.Files[0];varchunkIndex=int.Parse(context.Request["chunkIndex"]);varisEncrypted=bool.Parse(context.Request["isEncrypted"]);// 解密处理（Base64祖传解密法）byte[]fileData;using(varms=newMemoryStream()){file.InputStream.CopyTo(ms);fileData=isEncrypted?Convert.FromBase64String(Encoding.UTF8.GetString(ms.ToArray())):ms.ToArray();}// 存储分片到临时目录vartempPath=$"D:\\temp\\{file.FileName}_{chunkIndex}";File.WriteAllBytes(tempPath,fileData);context.Response.Write("{\"success\":true}");}catch(Exceptionex){context.Response.Write($"{{\"error\":\"{ex.Message}\"}}");}}}

兼容性解决方案（人类迷惑行为大赏）

加入我们的"毕业设计互助联盟"吧！

QQ群374992201福利：

• 加群红包1-99元（0.01元拼手气）
• 推荐项目提成20%（0元项目的20%还是0）
• 免费获取我的毕设bug（买一送十）
• 共享失业焦虑（今年就业率23%）

特别服务：

• 帮写代码（前提是你得请奶茶）
• 指导答辩（教你如何忽悠导师）
• 工作内推（推荐你去我舅的网吧当网管）

毕业设计の终极奥义

经过三天三夜的挣扎，我悟了！真正的解决方案是：

1. 前端：在页面上放个超大文件上传按钮（实际最多支持10MB）
2. 后端：收到文件后立即返回"上传成功"
3. 演示：提前准备好假数据，全屏播放录制好的视频
4. 答辩：当导师要求现场演示时，假装电脑蓝屏

优势：

• 开发成本极低
• 不挑浏览器
• 绝对不会有bug出现
• 为未来的产品经理生涯打下坚实基础

所以各位路过的神仙大佬们，救救孩子吧！这毕设要是做不出来，我就只能去继承我爸的沙县小吃了（其实想想也不错？）😭

（P.S. 真实建议：大文件上传确实复杂，可以优先实现核心功能，其他用第三方服务替代，比如七牛云就有现成的解决方案）

设置框架

安装.NET Framework 4.7.2
https://dotnet.microsoft.com/en-us/download/dotnet-framework/net472
框架选择4.7.2

添加3rd引用

编译项目

NOSQL

NOSQL无需任何配置可直接访问页面进行测试

SQL

使用IIS
大文件上传测试推荐使用IIS以获取更高性能。

使用IIS Express

小文件上传测试可以使用IIS Express

创建数据库

配置数据库连接信息

检查数据库配置

访问页面进行测试

相关参考：
文件保存位置，

效果预览

文件上传

文件刷新续传

支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。

下载完整示例

下载完整示例