news 2026/2/5 23:34:18

JSP如何设计大文件上传的进度条动态显示与用户反馈？

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JSP如何设计大文件上传的进度条动态显示与用户反馈？

开发者日记：2023年11月20日 周一 晴
项目名称：跨平台大文件传输系统（WebUploader+Vue3+JSP+腾讯云COS）

项目背景与核心挑战

近期承接了一个高难度外包项目，客户要求实现20G级文件/文件夹上传下载，需满足以下硬性条件：

  1. 断点续传：即使重启电脑，进度不能丢失（需持久化存储）
  2. 文件夹层级保留：上传后需100%还原原始目录结构
  3. 全浏览器兼容：从IE8到现代浏览器（Edge/Chrome/Firefox/Safari/Opera）
  4. 技术栈：Vue3（前端）+ JSP（后端）+ MySQL（数据库）+ 腾讯云COS（存储）

现存问题：

  • 网上开源方案仅支持单文件上传，无完整文件夹上传实现
  • IE8的Flash上传存在安全策略限制
  • 腾讯云COS的分片上传API与百度OBS有差异，需重新适配
  • 20G文件传输需解决内存溢出和超时问题

技术方案设计

前端架构（Vue3 + WebUploader）
graph TD A[用户选择文件/文件夹] --> B{浏览器类型} B -->|Chrome/Firefox| C[使用webkitdirectory API] B -->|IE8| D[调用ActiveX控件递归读取] C & D --> E[生成文件树结构] E --> F[计算文件MD5（spark-md5）] F --> G[分片上传（WebUploader）] G --> H[本地存储进度（localStorage）]
后端架构（JSP + Servlet）
是
否
是
否
接收分片
是否首片
创建数据库任务记录
更新分片进度
存储分片到临时目录
是否全部分片完成
合并文件并上传COS
返回继续上传指令
关键数据库设计
CREATETABLEupload_tasks(task_idVARCHAR(36)PRIMARYKEY,-- UUIDfile_md5VARCHAR(64)NOTNULL,relative_pathVARCHAR(512),-- 保留文件夹层级（如 /docs/2023/）total_chunksINT,uploaded_chunksINT,statusENUM('pending','uploading','completed','failed'),cos_keyVARCHAR(1024),-- COS存储路径create_timeDATETIMEDEFAULTNOW());

核心代码实现

前端：文件夹上传与断点续传（Vue3）
// src/components/FolderUploader.vueimport{ref,onMounted}from'vue';importWebUploaderfrom'webuploader';importSparkMD5from'spark-md5';exportdefault{setup(){consttaskList=ref([]);constuploader=ref(null);// 初始化上传器（兼容IE8）constinitUploader=()=>{constisIE8=!!window.ActiveXObject||"ActiveXObject"inwindow;uploader.value=WebUploader.create({swf:'/static/Uploader.swf',// IE8回退server:'/api/upload-chunk',chunked:true,chunkSize:isIE8?4*1024*1024:10*1024*1024,threads:isIE8?1:3,// IE8限制并发formData:{taskId:localStorage.getItem('currentTaskId')||''}});// 恢复未完成任务restoreTasks();};// 递归解析文件夹（跨浏览器）consthandleFolderSelect=(e)=>{constfiles=e.target.files;if(!files.length)return;constparseFolder=(entries,parentPath='')=>{for(letentryofentries){if(entry.isFile){constrelativePath=parentPath?`${parentPath}/${entry.name}`:entry.name;addUploadTask(entry,relativePath);}elseif(entry.isDirectory){constdirReader=entry.createReader();dirReader.readEntries((newEntries)=>{parseFolder(newEntries,parentPath?`${parentPath}/${entry.name}`:entry.name);});}}};// Chrome/Firefox使用webkitGetAsEntryif(files[0].webkitGetAsEntry){constentry=files[0].webkitGetAsEntry();if(entry.isDirectory){constdirReader=entry.createReader();dirReader.readEntries(parseFolder);}else{addUploadTask(files[0],files[0].name);}}// IE8使用ActiveX（代码省略）};// 添加上传任务constaddUploadTask=(file,relativePath)=>{consttask={file,relativePath,md5:'',chunkCount:Math.ceil(file.size/uploader.value.options.chunkSize)};// 计算文件MD5（用于断点校验）calculateFileMD5(file,(md5)=>{task.md5=md5;taskList.value.push(task);saveTaskToLocal(task);});};onMounted(()=>{initUploader();document.getElementById('folderInput').addEventListener('change',handleFolderSelect);});return{taskList,uploader};}};
后端：JSP分片处理与COS上传
// /api/upload-chunk.jsp<%@ pageimport="com.qcloud.cos.COSClient, com.qcloud.cos.model.*"%><%@ pageimport="java.util.UUID, java.io.*"%><%// 1. 获取参数StringtaskId=request.getParameter("taskId");intchunkIndex=Integer.parseInt(request.getParameter("chunkIndex"));inttotalChunks=Integer.parseInt(request.getParameter("totalChunks"));StringfileMd5=request.getParameter("fileMd5");StringrelativePath=request.getParameter("relativePath");// 2. 保存分片StringtempDir=application.getRealPath("/")+"/temp/"+taskId;Filedir=newFile(tempDir);if(!dir.exists())dir.mkdirs();PartfilePart=request.getPart("file");StringchunkPath=tempDir+"/chunk_"+chunkIndex;filePart.write(chunkPath);// 3. 更新数据库try(Connectionconn=DriverManager.getConnection("jdbc:mysql://localhost:3306/file_transfer","user","pass");PreparedStatementstmt=conn.prepareStatement("UPDATE upload_tasks SET uploaded_chunks=? WHERE task_id=?")){stmt.setInt(1,chunkIndex+1);stmt.setString(2,taskId);stmt.executeUpdate();}// 4. 检查是否全部上传完成booleanisComplete=false;try(Connectionconn=DriverManager.getConnection("jdbc:mysql://localhost:3306/file_transfer","user","pass");ResultSetrs=conn.createStatement().executeQuery("SELECT uploaded_chunks, total_chunks FROM upload_tasks WHERE task_id='"+taskId+"'")){if(rs.next()){isComplete=rs.getInt("uploaded_chunks")>=rs.getInt("total_chunks");}}// 5. 合并并上传COSif(isComplete){StringfinalPath=tempDir+"/final_"+fileMd5;mergeChunks(tempDir,finalPath,totalChunks);// 合并逻辑省略// 腾讯云COS上传COSClientcosClient=newCOSClient("secretId","secretKey","region");StringcosKey="uploads/"+taskId+"/"+relativePath;cosClient.putObject(newPutObjectRequest("your-bucket",cosKey,newFile(finalPath)));// 清理临时文件deleteDirectory(newFile(tempDir));}out.print("{\"status\":\"success\"}");%>

关键问题解决

  1. IE8文件夹上传：

    • 使用``配合ActiveX的FileSystemObject递归读取
    • 需用户手动设置IE安全级别为"低"（客户要求，已文档说明）

  2. 腾讯云COS分片校验：

    • 上传前通过COSObject的doesObjectExist方法检查分片是否已存在

  3. 20G文件内存优化：

    • 采用流式处理，避免一次性加载整个文件到内存
    • JSP设置request.setAttribute("maxPostSize", "21474836480")（20GB）

求助与社区支持

目前IE8的ActiveX方案在Windows 10上存在权限问题，已在QQ群（374992201）发布详细错误日志。完整代码已上传至Gitee（待脱敏），急需大神协助解决：

  1. ActiveX控件在Win10的兼容性问题
  2. 大文件合并时的内存溢出优化
  3. 跨浏览器进度条同步显示

明日计划：编写自动重试机制和COS上传失败后的回滚逻辑，确保20G文件传输的稳定性。

（日记结束）

附：技术栈对比表

模块原方案当前方案优化点
前端框架jQueryVue3 Composition API响应式数据管理
上传组件WebUploader基础版定制版（支持文件夹+断点）递归解析文件夹结构
后端语言PHPJSP利用Servlet处理大文件流
对象存储百度OBS腾讯云COS适配不同的分片API规范

如需完整项目或调试协助，请联系QQ群或留言获取测试账号！

导入项目

导入到Eclipse：点南查看教程
导入到IDEA：点击查看教程
springboot统一配置：点击查看教程

工程

NOSQL

NOSQL示例不需要任何配置，可以直接访问测试

创建数据表

选择对应的数据表脚本，这里以SQL为例

修改数据库连接信息

访问页面进行测试

文件存储路径

up6/upload/年/月/日/guid/filename

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载示例

点击下载完整示例

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

跨平台场景下Java如何处理大文件上传的内存占用问题？

《码农的20G文件上传历险记&#xff1a;从IE8到破产边缘》 各位老铁们好啊&#xff01;我是辽宁那个靠PHP续命的码农老王&#xff0c;最近接了个让我怀疑人生的外包需求——用100块钱预算实现20G文件上传系统还得兼容IE8&#xff01;这需求比沈阳冬天的大风还让人凌乱啊&#…

作者头像 李华
网站建设 2026/2/5 20:13:43

基于Java的菜匣子优选系统设计与实现

第三章 系统分析 3.1 系统设计目标 菜匣子优选生鲜电商系统主要是为了用户方便对商品信息的了解以及查看商品分类和查看订单信息&#xff0c;也是为了更好的让管理员进行更好存储所有数据信息及快速方便的检索功能&#xff0c;对系统的各个模块是通过许多今天的发达系统做出合理…

作者头像 李华
网站建设 2026/2/5 19:05:04

从零到跑通Demo：Open-AutoGLM完整安装教程（含依赖库版本锁定方案）

第一章&#xff1a;Open-AutoGLM 安装前的环境准备与核心概念解析在部署 Open-AutoGLM 之前&#xff0c;确保开发环境满足其运行依赖是成功安装与后续高效使用的前提。该框架基于 PyTorch 构建&#xff0c;并融合了 Hugging Face Transformers 的模型加载机制&#xff0c;因此 …

作者头像 李华
网站建设 2026/2/5 0:45:48

Open-AutoGLM类似工具哪家强？权威评测Top 6榜单出炉（含性能数据）

第一章&#xff1a;Open-AutoGLM类似工具的行业背景与选型意义随着大语言模型在自动化代码生成、自然语言理解与智能推理等领域的广泛应用&#xff0c;围绕模型集成与任务编排的开发工具链正经历快速演进。Open-AutoGLM作为支持多模型协同调用与自动化工作流构建的开源框架&…

作者头像 李华
网站建设 2026/2/5 22:13:40

如何3小时内完成Open-AutoGLM私有化部署？一线架构师亲授速成法

第一章&#xff1a;Open-AutoGLM私有化部署概述 Open-AutoGLM 是基于 AutoGLM 架构开发的开源大语言模型系统&#xff0c;支持在企业内部环境中进行私有化部署&#xff0c;保障数据安全与业务合规性。通过本地化部署&#xff0c;企业可在隔离网络中实现模型推理、微调与集成&am…

作者头像 李华
网站建设 2026/2/4 20:37:16

16、Elasticsearch索引结构扩展与优化指南

Elasticsearch索引结构扩展与优化指南 1. 映射设置与数据索引 在开始使用Elasticsearch时，我们需要对数据进行映射设置。以下是一个示例的映射结构： {// 这里可能是某个索引类型的整体设置"name" : {"type" : "object","properties&q…

作者头像 李华