HTML如何设计JQuery支持大文件上传的拖拽功能？

2023年11月2日 星期四 阴有小雨
外包项目日志 - 企业级大文件传输系统Day3

项目背景与架构设计

客户是某地质勘探研究院，每日需上传**20GB+**的勘探数据（含激光扫描点云、地质剖面图等），要求：

1. 文件夹结构保留：1000+分类/日，需完整维护项目编号/日期/设备类型/的层级
2. 军工级加密：传输层SM4（国产商用密码）+存储层AES-256双重加密
3. 极端断点续传：浏览器崩溃/系统重启后能从最后一个分片恢复

技术栈升级：

• 前端：Vue3 + WebUploader（强制分片+IndexedDB+Service Worker）
• 后端：ASP.NET WebForm + OSS分片直传
• 数据库：SQL Server文件元数据树形存储（CTE递归查询优化）

核心代码实现

1. 前端：文件夹结构解析与分片调度

// 使用FileSystem API递归读取文件夹（H5方案）asyncfunctionscanDirectory(dirHandle){constfileTree={};forawait(const[name,handle]ofdirHandle.entries()){if(handle.kind==='file'){fileTree[name]=awaithandle.getFile();}elseif(handle.kind==='directory'){fileTree[name]=awaitscanDirectory(handle);// 递归构建树}}returnfileTree;}// IE8降级方案：通过ActiveX获取文件夹路径functionscanFolderIE8(path){constfso=newActiveXObject("Scripting.FileSystemObject");constfolder=fso.GetFolder(path);constfiles=newEnumerator(folder.files);// 注：需客户系统启用ActiveX}

2. 后端：分片合并与OSS直传（C#）

// UploadHandler.ashxpublicvoidProcessRequest(HttpContextcontext){stringfileId=context.Request["fileId"];intchunkIndex=int.Parse(context.Request["chunkIndex"]);// 加密分片（SM4+CBC模式）byte[]encryptedChunk;using(SM4sm4=newSM4()){encryptedChunk=sm4.EncryptCBC(File.ReadAllBytes(context.Request.Files[0].InputStream),ConfigurationManager.AppSettings["SM4_Key"],ConfigurationManager.AppSettings["SM4_IV"]);}// 临时分片存储stringchunkPath=$"{OSS_TEMP_PATH}/{fileId}_{chunkIndex}.part";File.WriteAllBytes(chunkPath,encryptedChunk);// 响应分片上传结果context.Response.Write(JsonConvert.SerializeObject(new{status="success",nextChunk=chunkIndex+1}));}

3. 断点续传持久化方案

// Service Worker离线缓存控制self.addEventListener('fetch',event=>{if(event.request.url.includes('/api/upload_chunk')){event.respondWith(caches.open('upload-cache').then(cache=>{returnfetch(event.request).then(response=>cache.put(event.request,response.clone())).catch(()=>cache.match(event.request));// 失败时使用缓存}));}});

今日技术突破

1. 国产浏览器适配：

   • 红莲花浏览器需关闭SameSite限制，添加头Set-Cookie: Secure; SameSite=None
   • 龙芯浏览器要求分片大小必须为2MB整数倍

2. 超大规模文件夹优化：

   • 采用虚拟滚动渲染文件树（实测支持10万+文件展示）
   • 数据库使用HierarchyId类型存储路径结构

3. 加密性能问题：

   • 在Web Worker中运行SM4算法，避免UI线程阻塞

遇到的深坑

1. IE8的内存泄漏：

   • WebUploader的Flash组件连续上传5次后会崩溃
   • 临时方案：每上传完成3个文件后强制刷新Flash容器

2. OSS分片合并超时：

   • 20GB文件合并时HTTP请求超时
   • 最终方案：改用OSS OpenAPI的CompleteMultipartUpload

明日计划

1. 编写完整开发文档（含国产化适配章节）
2. 压力测试：模拟100并发文件夹上传
3. 联系客户确认信创环境具体参数

附：项目结构示意图

📦FileSystemCore ├───Client │ ├── WebUploader // 兼容层 │ └── FileTree.vue // 虚拟滚动组件 ├───Server │ ├── FileService.asmx // 主逻辑 │ └── SM4Helper.cs // 国密算法封装 └───Docs ├── 信创环境部署指南.md └── 二次开发API文档.md

（日记风格建议：突出技术难点解决过程+客户特殊需求应对策略）

如果需要完整的ASP.NET分片合并方案或SM4算法封装库，可以进一步交流！已申请加入QQ群374992201。

设置框架

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

创建数据库

配置数据库连接信息

检查数据库配置

访问页面进行测试

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

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

批量下载

支持文件批量下载

下载续传

文件下载支持离线保存进度信息，刷新页面，关闭页面，重启系统均不会丢失进度信息。

文件夹下载

支持下载文件夹，并保留层级结构，不打包，不占用服务器资源。

下载完整示例

下载完整示例