HTML5 批量大文件上传下载

在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现。

先说下要求:

PC端全平台支持,要求支持Windows,Mac,Linux

支持所有浏览器。

支持文件批量上传

支持文件夹上传,且要求在服务端保留层级结构。文件夹数量要求支持到10W。

支持大文件断点续传,要求刷新浏览器,重启浏览器,重启电脑后仍然能够继续上传。文件大小要求能够支持到50个G。

支持自动加载本地文件,要求能够自动加载指定的本地文件。

支持文件批量下载,要求不要在服务器打包。因为50G的文件在服务器打包时间比较长。

支持文件夹下载,要求不要在服务器打包,下载到本地后要求保留层级结构

文件列表面板支持路径导航,新建文件夹

对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件。这个common-fileupload上传组件的jar包可以去apache官网上面下载,也可以在struts的lib文件夹下面找到,struts上传的功能就是基于这个实现的。common-fileupload是依赖于common-io这个包的,所以还需要下载这个包。

一、开发环境搭建

创建一个FileUploadAndDownLoad项目,加入Apache的commons-fileupload文件上传组件的相关Jar包,如下图所示:

依赖jar包如下

二、实现文件上传

前台HTML模板

文件块处理逻辑如下

保存文件块逻辑如下

web.xml配置如下

运行效果如下:

文件面板逻辑

前台代码

2.3、文件上传的细节

上述的代码虽然可以成功将文件上传到服务器上面的指定目录当中,但是文件上传功能有许多需要注意的小细节问题,以下列出的几点需要特别注意的

1、为保证服务器安全,上传文件应该放在外界无法直接访问的目录下,比如放于WEB-INF目录下。

2、为防止文件覆盖的现象发生,要为上传文件产生一个唯一的文件名。

3、为防止一个目录下面出现太多文件,要使用hash算法打散存储。

4、要限制上传文件的最大值。

5、要限制上传文件的类型,在收到上传文件名时,判断后缀名是否合法。

针对上述提出的5点细节问题,我们来改进一下UploadHandleServlet,改进后的代码如下:

文件数据表结构

文件夹数据表结构

下载数据表结构

针对上述提出的5点小细节问题进行改进之后,我们的文件上传功能就算是做得比较完善了。

三、文件下载

加载文件列表,注意,这里只列出上传完的文件和文件夹,没有上传完的就不列出了

数据库的处理逻辑比较简单,注意一下SQL语句中的条件即可

我们要将Web应用系统中的文件资源提供给用户进行下载,首先我们要有一个页面列出上传文件目录下的所有文件,当用户点击文件下载超链接时就进行下载操作,编写一个ListFileServlet,用于列出Web应用系统中所有下载文件。

文件列表加载逻辑

这里简单说一下ListFileServlet中listfile方法,listfile方法是用来列出目录下的所有文件的,listfile方法内部用到了递归,在实际开发当中,我们肯定会在数据库创建一张表,里面会存储上传的文件名以及文件的具体存放目录,我们通过查询表就可以知道文件的具体存放目录,是不需要用到递归操作的,这个例子是因为没有使用数据库存储上传的文件名和文件的具体存放位置,而上传文件的存放位置又使用了散列算法打散存放,所以需要用到递归,在递归时,将获取到的文件名存放到从外面传递到listfile方法里面的Map集合当中,这样就可以保证所有的文件都存放在同一个Map集合当中。

编写一个用于处理文件下载的Servlet,DownLoadServlet的代码如下:

文件管理器主要逻辑如下:

文件管理器所有的逻辑都在PageFileMgr.java中实现。

另外,文件管理器有一些相关的配置在data目录下

系统配置数据如下

路径配置如下

文件管理器的脚本处理全部放在index.js中

关于JavaWeb中的文件上传和下载功能的内容就这么多。

最终实现的效果如下:

文件批量上传

文件批量下载

路径导航

更详细教程可以参考我的这篇文章:http://blog.ncmem.com/wordpress/2019/08/12/java-web-%e8%83%bd%e5%a4%9f%e5%ae%9e%e7%8e%b0%e6%95%b4%e4%b8%aa%e6%96%87%e4%bb%b6%e5%a4%b9%e7%9a%84%e4%b8%8a%e4%bc%a0%e4%b8%8b%e8%bd%bd%e5%90%97%ef%bc%9f/

欢迎入群一起讨论:374992201

原文地址:https://www.cnblogs.com/songsu/p/12564233.html

时间: 2024-08-06 08:16:55

HTML5 批量大文件上传下载的相关文章

局域网 批量大文件上传下载

1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通过浏览器上传至服务器,做一层中转便可以实现,但当这份文件非常大到了10GB级别,我们就需要思考另一种形式的技术方案了,也就是本文要阐述的方案. 技术要求主要有以下几方面: 支持超大数据量.10G级别以上 稳定性:除网络异常情况100%成功 准确性:数据无丢失,读写准确性100% 效率:1G文件分钟级

c# 批量大文件上传下载

以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  可以带参数 [HttpPost("upload")] public JsonResult uploadProject(IFormFile file, string userId) { if (file != null) { var fileDir = "D:\\aaa"

WebUploader 批量大文件上传下载

文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); this.root.put("f_id", ""); this.root.put("f_nameLoc", "根目录"); this.root.put("f_pid", ""); thi

封装了okhttp的网络框架,支持大文件上传下载,上传进度...

本帖最后由 anjoy紫外线 于 2016-4-20 16:42 编辑   1.用法 对于Eclipse不能运行项目的,提供了apk供直接运行,位于项目根目录 okhttputils_v1.x.x.apk. 本项目Demo的网络请求是我自己的服务器,有时候可能不稳定,网速比较慢时请耐心等待.. 对于Android Studio的用户,可以选择添加: compile 'com.lzy.net:okhttputils:1.3.0'  //可以单独使用,不需要依赖下方的扩展包    compile'c

java+web+大文件上传下载

文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦.缺乏交互.用户体验差. 一.前端代码 英国程序员Remy Sharp总结了这些新的接口 ,本文在他的基础之上,讨论在前端采用HTML5的API,对文件上传进行渐进式增强:     * iframe上传  * ajax上传  * 进度条  * 文件预览  * 拖放上传 1.1 传统形式 文件上传的传统形式,是使用表单元素file,参考 http://www.ruanyifeng.com/blog/2012/08/file_

html5+java大文件上传代码

<body> <input id="fileid" type="file" accept="video/*;capture=camera" onchange="onfile(this)"> <input id="btn" type="button" value="提交"> <script type="text/jav

Nodejs+HTML5兼容IE789的大文件上传完整版

业余将大文件上传重新梳理了一遍,后端基于Nodejs:有几个要点感觉很好玩: 兼容性:IE789为代表: 跨域上传:document.domain||middlePage: 多文件上传:input['type=file'] multiple: 拖拽上传:drag drop: 大文件分段:files.slice(s,e): 断点续传:localStorage: 接收分段的文件:formidable.onPart: 陆续写入分段文件:fs.write(fd,bf,offset,length,posi

gitlab使用过程中遇到大文件上传或下载失败的问题,总结一下

环境如下:gitlab服务器redhat,客户端环境mac os,如果是其他环境遇到问题仅供参考 如果gitlab上传代码提示: error: RPC failed; result=22, HTTP code = 411 该问题是由于客户端设置的http_post_buffer大小不足导致的,解决方法如下: 进入到工程所在的终端目录下执行: git config http.postBuffer 524288000 如果gitlab上传代码提示: error: RPC failed; result

张明贵-Linux文件上传下载及sCRT配置批量管理功能

[讲课:互动,用提问的方式来吸引听众的注意力,听众吸收最大化] 大学是在许昌学院读的,在我看来,不干念PPT的老师就是好讲师,因为大部分任课老师自顾自讲,没有互动,传授的知识我们只是被动的听,没有引导听课者的思考,再此吐槽一下,哈哈!我还是真心希望我的母校越来越好. 文件的上传下载 rz 上传 rz命令不存在 [[email protected] ~]# rz -bash: rz: command not found 安装 lrzsz(需要联网或配置yum源) yum install lrzsz