首页 > 其他分享 >HTML大文件上传解决方案实例代码

HTML大文件上传解决方案实例代码

时间:2022-09-20 12:14:47浏览次数:92  
标签:文件夹 文件 实例 如下 编辑 HTML 上传 下载

在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/11/12/html5%e6%96%87%e4%bb%b6%e5%a4%b9%e4%b8%8a%e4%bc%a0%e4%b8%8b%e8%bd%bd%e7%bb%84%e4%bb%b6/

 

欢迎入群一起讨论:374992201

标签:文件夹,文件,实例,如下,编辑,HTML,上传,下载
From: https://www.cnblogs.com/zyzzz/p/16710568.html

相关文章

  • Web大文件上传解决方案实例代码
    ​总结一下大文件分片上传和断点续传的问题。因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况。http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较......
  • HTML详解、HTML标签分类
    什么是HTMLHTML(超文本标记语言——HyperTextMarkupLanguage)是构成Web世界的一砖一瓦。它定义了网页内容的含义和结构。除HTML以外的其它技术则通常用来描述一个网页......
  • 新开源HTML5单文件网页版ACME客户端,可在线申请Let's Encrypt、ZeroSSL免费HTTPS多域名
    目录开源项目的起源项目地址使用方法第一步:选择Let'sEncrypt、ZeroSSL或其他证书颁发机构第二步:证书配置,填写域名第三步:完成域名所有权的验证第四步:下载保存证书PEM文件源......
  • 如何使用html制作简历
    今天跟大家分享一下,如何制作简历页面  从图片可以观察到,头部"个人简历"使用那几个常用的文本标签<span>或者<p>,<h1>即可;简历里有很多的栏,这就需要用到table标签来......
  • 断点续传 上传逻辑及代码
    整体逻辑如下    前台引用spark-md5获取文件唯一ID值,即md5值,前台将文件进行分片,通过该值进行后台校验,以此实现断点续传。    前台计算MD5,前台计算MD5快慢......
  • 微信公众号如何上传附件文件
    说到微信公众号,相信大家都非常熟悉。微信公众号是开发者或商家在微信公众平台上申请的应用账号,该账号与QQ账号互通,平台上实现和特定群体的文字、图片、语音、视频的全方位......
  • Flask学习笔记(一)-最小实例+路由
    一、Flask说明Flask是一个使用Python编写的轻量级Web应用框架。其WSGI工具箱采用Werkzeug,模板引擎则使用Jinja2。Flask使用BSD授权。Flask也被称为“microfr......
  • delphi中WEBBrowser网页html相互调用(一)
    1、基本操作1.1、激活vardoc,url:Olevariant;beginurl:='about:blank';//或者一个有实际意义的urlWebBrowser1.Navigate2(url);//这样就激活了!end;1.2、写HTM......
  • Delphi 用程序实现自动的html操作
    unitUnit1; interface uses Windows,Messages,SysUtils,Variants,Classes,Graphics,Controls,Forms, Dialogs,OleCtrls,SHDocVw,mshtml,StdCtrls,......
  • java中的类实例化机制
    定义一个Pet类publicclassPet{publicStringname;publicintage;publicvoidshoot(){System.out.println("叫~~~");}}......