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

一个被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){// 这里应该有数据库操作代码...}}

开发血泪史

IE8兼容性：我尝试了各种黑魔法，最后发现唯一的解决方案是…建议用户换电脑（当然这话不能跟甲方说）
20G文件上传：我的开发机只有256G SSD，测试时差点把自己电脑搞崩溃
加密传输：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());