news 2026/4/15 10:35:42

如何在网页中实现跨平台的大文件切片上传?

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
如何在网页中实现跨平台的大文件切片上传?

一个被20G文件折磨的.NET程序员的求生指南

“甲方爸爸说要兼容IE8?还要20G文件上传?预算100块?” —— 当我看到需求文档时,手里的泡面突然就不香了…🍜

技术方案:在刀尖上跳舞

前端部分:与IE8老爷爷斗智斗勇

// 文件分片上传核心代码(纯手工打造,兼容IE8版)functionuploadFile(file){// IE8特供版检测if(navigator.userAgent.indexOf('MSIE 8.0')>-1){alert('尊敬的用户,检测到您正在使用IE8,我们将为您启用特殊兼容模式...');// 其实就是降级方案...returnie8SpecialUpload(file);}constCHUNK_SIZE=5*1024*1024;// 5MB一片letchunks=Math.ceil(file.size/CHUNK_SIZE);letuploaded=0;// 加密相关(SM4/AES)letcrypto=newSuperCrypto('SM4');// 这个类当然是我编的...for(leti=0;i<chunks;i++){letstart=i*CHUNK_SIZE;letend=Math.min(start+CHUNK_SIZE,file.size);letchunk=file.slice(start,end);// 加密分片letencryptedChunk=crypto.encrypt(chunk);letformData=newFormData();formData.append('file',encryptedChunk);formData.append('chunkIndex',i);formData.append('totalChunks',chunks);formData.append('fileName',file.name);formData.append('fileSize',file.size);// 这里应该是AJAX调用,但为了兼容IE8...letxhr=newXMLHttpRequest();xhr.open('POST','/api/upload',true);xhr.onload=function(){uploaded++;updateProgress(uploaded/chunks*100);saveProgressToLocalStorage(file.name,uploaded);};xhr.send(formData);}}// IE8特供版上传(Flash后备方案)functionie8SpecialUpload(file){// 这里应该有Flash上传代码...alert('请安装Flash Player 10.1或更高版本');returnfalse;}

后端部分:C# WebForm的救赎

// UploadHandler.ashx 文件上传处理publicclassUploadHandler:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){try{// 获取上传的文件分片HttpPostedFilefile=context.Request.Files["file"];intchunkIndex=int.Parse(context.Request["chunkIndex"]);inttotalChunks=int.Parse(context.Request["totalChunks"]);stringfileName=context.Request["fileName"];longfileSize=long.Parse(context.Request["fileSize"]);// 解密处理byte[]fileData=newbyte[file.InputStream.Length];file.InputStream.Read(fileData,0,fileData.Length);byte[]decryptedData=CryptoHelper.SM4Decrypt(fileData,"密钥");// 临时保存分片stringtempPath=Path.Combine("E:\\UploadTemp",fileName);if(!Directory.Exists(tempPath))Directory.CreateDirectory(tempPath);stringchunkPath=Path.Combine(tempPath,chunkIndex.ToString());File.WriteAllBytes(chunkPath,decryptedData);// 检查是否所有分片都已上传if(Directory.GetFiles(tempPath).Length==totalChunks){// 合并文件MergeFile(tempPath,"E:\\Uploads\\"+fileName);Directory.Delete(tempPath,true);// 记录到数据库SaveToDb(fileName,fileSize,"E:\\Uploads\\"+fileName);}context.Response.Write("{\"status\":\"ok\"}");}catch(Exceptionex){context.Response.Write("{\"status\":\"error\",\"message\":\""+ex.Message+"\"}");}}privatevoidMergeFile(stringtempPath,stringtargetPath){// 这里应该有合并文件的代码...}privatevoidSaveToDb(stringfileName,longfileSize,stringfilePath){// 这里应该有数据库操作代码...}}

开发血泪史

  1. IE8兼容性:我尝试了各种黑魔法,最后发现唯一的解决方案是…建议用户换电脑(当然这话不能跟甲方说)

  2. 20G文件上传:我的开发机只有256G SSD,测试时差点把自己电脑搞崩溃

  3. 加密传输:SM4在JavaScript端的实现让我掉了不少头发

文件夹上传的终极解决方案

// 文件夹上传保留层级结构functionuploadFolder(event){letfiles=event.target.files;letfolderStructure={};// 构建文件夹结构for(leti=0;i<files.length;i++){letfile=files[i];if(file.webkitRelativePath){letpaths=file.webkitRelativePath.split('/');letcurrentLevel=folderStructure;for(letj=0;j<paths.length-1;j++){if(!currentLevel[paths[j]]){currentLevel[paths[j]]={};}currentLevel=currentLevel[paths[j]];}currentLevel[paths[paths.length-1]]=file;}}// 递归上传uploadFolderItem(folderStructure,'');}functionuploadFolderItem(item,currentPath){for(letkeyinitem){if(item[key]instanceofFile){// 上传文件uploadFile(item[key],currentPath);}else{// 创建文件夹createFolderOnServer(currentPath+key+'/');// 递归上传子项uploadFolderItem(item[key],currentPath+key+'/');}}}

数据库设计(SQL Server版)

-- 文件记录表CREATETABLEFileRecords(Id UNIQUEIDENTIFIERPRIMARYKEYDEFAULTNEWID(),FileName NVARCHAR(255)NOTNULL,FileSizeBIGINTNOTNULL,FilePath NVARCHAR(MAX)NOTNULL,UploadTimeDATETIMEDEFAULTGETDATE(),IsEncryptedBITDEFAULT1,EncryptionType NVARCHAR(50)DEFAULT'SM4');-- 上传进度表(用于断点续传)CREATETABLEUploadProgress(SessionId NVARCHAR(255)PRIMARYKEY,FileName NVARCHAR(255)NOTNULL,FileMd5 NVARCHAR(255)NOTNULL,TotalChunksINTNOTNULL,UploadedChunksINTNOTNULL,LastUpdateTimeDATETIMEDEFAULTGETDATE());

给甲方爸爸的温馨Tips

  1. 关于IE8:真的不考虑升级一下吗?现在连微软都不支持IE8了…

  2. 关于20G文件:建议上传前先压缩,毕竟您家宽带上传20G可能需要一整天

  3. 关于100块预算:这个价格我们只能提供"心灵支持"服务了…

PS:那个QQ群真的存在,但红包可能已经被抢光了。至于"一个项目提成1万"…醒醒,该搬砖了!👷

设置框架

安装.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

创建数据库

配置数据库连接信息

检查数据库配置

访问页面进行测试


相关参考:
文件保存位置,

下载完整示例

下载完整示例

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/3/27 1:53:56

《把脉行业与技术趋势》-64-何为方向正确:方向是未来的目标,当种群生命的周期、国家宏观政策的生命周期、行业发展的生命周期、企业发展的周期、产品的发展生命周期、个人的职业操作周期,完全契合了,便是正确

一、方向的本质&#xff1a;不是路径&#xff0c;而是势能的汇聚点 方向并非一条固定路线&#xff0c;而是一个动态的、多维共振的目标状态。 单靠个人努力&#xff08;如加班、学习&#xff09;若脱离时代趋势&#xff0c;可能只是“高效地跑偏”&#xff1b;而当你的行动恰…

作者头像 李华
网站建设 2026/4/14 10:50:44

springboot三体科幻社区管理系统 商城 论坛好友私信

目录系统概述核心功能模块技术实现亮点扩展性设计项目技术支持可定制开发之功能亮点源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作系统概述 SpringBoot三体科幻社区管理系统是一个集商城、论坛、好友私信功能于一体的综合性平台&#xff…

作者头像 李华
网站建设 2026/4/11 1:59:57

‌大模型测试指标库:17个核心指标

在人工智能飞速发展的今天&#xff0c;大模型&#xff08;如GPT系列、BERT等&#xff09;已广泛应用于自然语言处理、图像识别和决策支持系统。然而&#xff0c;其复杂性给软件测试带来巨大挑战&#xff1a;如何系统评估模型性能&#xff0c;确保可靠性、公平性和效率&#xff…

作者头像 李华
网站建设 2026/4/8 3:15:31

YashanDB安装时报1676端口无法连接故障处理

我们的文章会在微信公众号IT民工的龙马人生和博客网站 ( www.htz.pw )同步更新 &#xff0c;欢迎关注收藏&#xff0c;也欢迎大家转载&#xff0c;但是请在文章开始地方标注文章出处&#xff0c;谢谢&#xff01; 由于博客中有大量代码&#xff0c;通过页面浏览效果更佳。 使用…

作者头像 李华
网站建设 2026/4/3 5:30:20

吐血推荐自考必备AI论文工具TOP9

吐血推荐自考必备AI论文工具TOP9 2026年自考论文写作工具测评&#xff1a;为何需要一份精准榜单&#xff1f; 随着自考人数逐年攀升&#xff0c;论文写作成为每位考生必须面对的挑战。从选题构思到文献检索&#xff0c;再到格式规范与内容润色&#xff0c;每一步都可能成为阻碍…

作者头像 李华
网站建设 2026/4/3 16:23:45

信创环境下WordPress如何实现Word文档的版本控制?

要求&#xff1a;开源&#xff0c;免费&#xff0c;技术支持 博客&#xff1a;WordPress 开发语言&#xff1a;PHP 数据库&#xff1a;MySQL 功能&#xff1a;导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏 平台&#xff1a;Window…

作者头像 李华