文件夹上传插件webupload插件
在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中的文件上传和下载功能的内容就这么多。
最终实现的效果如下:
文件批量上传

文件批量下载

路径导航

文件夹上传插件webupload插件的更多相关文章
- 文件夹上传组件webupload插件
javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 <form id=" ...
- 文件夹上传控件webupload插件
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...
- Web大文件(夹)上传(断点续传)控件发布-Xproer.HttpUploader6
版权所有 2009-2017荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...
- Web大文件(夹)上传(断点续传)控件-Xproer.HttpUploader6
版权所有 2009-2017荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...
- js文件夹上传
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- vue文件夹上传组件选哪个好?
一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...
- Java Web 项目的文件/文件夹上传下载
需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...
- js文件夹上传下载组件
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
- java文件夹上传下载组件
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
随机推荐
- tornado之websoket
继承WebSoketHandler def open(self): # 当一个WebSoket连接建立之后被调用 def on_message(self, message): # 当客户端发送一个消息 ...
- vim中常用折叠命令
最常用3个折叠命令 .反复打开关闭折叠:za (意思就是,当光标处折叠处于打开状态,za关闭之,当光标处折叠关闭状态,打开之) .打开全部折叠:zR .关闭全部折叠:zM 小试折叠: :set fdm ...
- 在配置和销售凭证 GET_CONFIG_MODE 间通信时内部出错
“在配置和销售凭证 GET_CONFIG_MODE 间通信时内部出错” 订单打开出现这种错误提示,多半是配置对象号问题. SAP NOTE 2019-09-27 901893901893 - Repo ...
- ASP.NET中App_Data等文件夹的作用
文件夹名称 文件类型 注 释 Bin .dll 包含应用程序所需的任何预生成的程序集 App_Browsers .browser 包含应用程序特有的浏览器定义文件,ASP.NET用它来识别各浏览器 ...
- C#读写设置修改调整UVC摄像头画面-焦点
有时,我们需要在C#代码中对摄像头的焦点进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...
- 【Java并发编程】24、Synchronized实现原理解析
一.概述 我们知道在JDK1.5之前synchronized是一个重量级锁,相对于j.u.c.Lock,它会显得那么笨重,以至于我们认为它不是那么的高效而慢慢摒弃它. 不过,随着后续Java版本更新对 ...
- MongoDB常用数据库命令第一集
1.查询操作(1)Help查看命令提示helpdb.help()db.test.help()db.test.find().help()(2)创建/切换数据库use music(3)查询数据库show ...
- VUE组件3 数据流和.sync修饰符
单向数据流:数据通过prop从父组件传递到子组件中,当父级组件中的数据更新时,传子组件也会更新,但不能在子组件中修改.防止子组件在无意中修改,改变父级组件状态 然而,双向数据绑定在某些情况下有用.如果 ...
- vue使用vue-cli创建项目
安装运行环境(node和npm) 安装vue-cli(查看是否安装成功vue -V) 安装webpack 新建项目 1.vue init webpack 项目名称 2.配置项目有关的信息(项目名称,开 ...
- 32、flex布局
html: <div class="parent"> <div class="son">1</div> <div cl ...