SpringMVC怎么实现web端上传超大文件 |
您所在的位置:网站首页 › mac刷新页面 › SpringMVC怎么实现web端上传超大文件 |
一、 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传; 支持PC端全平台操作系统,Windows,Linux,Mac
支持文件和文件夹的批量下载,断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。 支持文件夹批量上传下载,服务器端保留文件夹层级结构,服务器端文件夹层级结构与本地相同。 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验; 支持断点续传,关闭浏览器或刷新浏览器后仍然能够保留进度。 支持文件夹结构管理,支持新建文件夹,支持文件夹目录导航 交互友好,能够及时反馈上传的进度; 服务端的安全性,不因上传文件功能导致JVM内存溢出影响其他功能使用; 最大限度利用网络上行带宽,提高上传速度;
二、 设计分析 对于大文件的处理,无论是用户端还是服务端,如果一次性进行读取发送、接收都是不可取,很容易导致内存问题。所以对于大文件上传,采用切块分段上传 从上传的效率来看,利用多线程并发上传能够达到最大效率。 三、解决方案: 文件上传页面的前端可以选择使用一些比较好用的上传组件,例如百度的开源组件WebUploader,泽优软件的up6,这些组件基本能满足文件上传的一些日常所需功能,如异步上传文件,文件夹,拖拽式上传,黏贴上传,上传进度监控,文件缩略图,甚至是大文件断点续传,大文件秒传。
1.1 在页面导入所需css,js
1.2 编写上传页面标签
点击选择文件
webupload代码
//1.初始化WebUpload,以及配置全局的参数 var uploader = WebUploader.create( { //flashk控件的地址 swf: "${pageContext.request.contextPath}/js/Uploader.swf", //后台提交地址 server:"${pageContext.request.contextPath}/UploadServlet", //选择文件控件的标签 pick:"#filePicker", //自动上传文件 auto:true, } );
//2.选择文件后,文件信息队列展示 // 注册fileQueued事件:当文件加入队列后触发 // file: 代表当前选择的文件 uploader.on("fileQueued",function(file){ //追加文件信息div $("#fileList").append(""+file.name+"等待上传..."); });
//3.注册上传进度监听 //file: 正在上传的文件 //percentage: 当前进度的比例。最大为1.例如:0.2 uploader.on("uploadProgress",function(file,percentage){ var id = $("#"+file.id); //更新状态信息 id.find("div.state").text("上传中..."); //更新上传百分比 id.find("span.text").text(Math.round(percentage*100)+"%"); });
//4.注册上传完毕监听 //file:上传完毕的文件 //response:后台回送的数据,以json格式返回 uploader.on("uploadSuccess",function(file,response){ //更新状态信息 $("#"+file.id).find("div.state").text("上传完毕"); }); 后端接收上传数据采用FileUpload 是 Apache commons下面的一个子项目,用来实现Java环境下的文件上传功能。 DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload sfu = new ServletFileUpload(factory); sfu.setHeaderEncoding("utf-8"); try { List items = sfu.parseRequest(request); for(FileItem item:items){
if(item.isFormField()){ //普通信息 }else{ //文件信息 //判断只有文件才需要进行保存处理 System.out.println("接收的文件名称:"+item.getName()); //拷贝文件到后台的硬盘 FileUtils.copyInputStreamToFile(item.getInputStream(), new File(serverPath+"/"+item.getName())); System.out.println("文件保存成功"); } } } catch (FileUploadException e) { e.printStackTrace(); } 效果展示:
示例下载地址 源代码文档 asp.net源码下载,jsp-springboot源码下载,jsp-eclipse源码下载,jsp-myeclipse源码下载,php源码下载,csharp-winform源码下载,vue-cli源码下载,c++源码下载 详细配置信息及思路 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |