【不用框架】文件上传和下载

什么是文件上传?

文件上传就是把用户的信息保存起来。

为什么需要文件上传?

在用户注册的时候,可能需要用户提交照片。那么这张照片就应该要进行保存。

上传组件(工具)

为什么我们要使用上传工具?

为啥我们需要上传组件呢?当我们要获取客户端的数据,我们一般是通过getParameter()方法来获取的。

上传文件数据是经过MIME协议进行分割的,表单进行了二进制封装。也就是说:getParameter()无法获取得到上传文件的数据。

我们首先来看看文件上传http是怎么把数据带过去的

  • jsp页面,表单一定要指定enctype:multipart/form-data


 
  • http抓包

640?wx_fmt=png

  • 尝试在Servlet上使用getParameter()获取数据


 
  • 直接使用getParameter是获取不到数据的。

640?wx_fmt=png

那么我们要怎么办呢????request对象提供了ServletInputStream流给我们读取数据

  • 我们试着读取下文件


 
  • 在jsp页面多增添一个input控件


 
  • 我上传的文本文件内容就是111111,读取效果如下:

640?wx_fmt=png

现在我们能够读取上传文件的数据了,但是现在问题又来了:怎么把文件上传个数据和普通传送给服务器的数据分割开来呢???上面在图上我们已经看到了,他们是混合在一起的。

按我们平常的做法是很难分割开来的,所以我们需要上传组件


上传组件有两种

  • FileUpload【操作比较复杂】

  • SamrtUpload【操作比较简单】


FileUpload

要使用FileUpload组件,就需要导入两个jar包

  • commons-io

  • Commons-fileupload

开发步骤

  • 创建解析器工厂对象【DiskFileItemFactory】

  • 通过解析器工厂创建解析器【ServletFileUpload】

  • 调用解析器方法解析request对象,得到所有上传的内容【list】

  • 遍历list,判断每个对象是否是上传文件

    • 如果是普通表单字段,得到字段名和字段值

    • 如果是上传文件,调用InputSteam方法得到输入流,读取上传的数据


快速入门


 

测试

  • 普通的字段和上传的文件都能读取得到了!

640?wx_fmt=png


SmartUpload

要使用SmartUpload组件,就需要导入smartupload.jar开发包

快速入门


 

测试

同样地,我们可以上传文件到uploadFile文件夹中。代码量也的确减少很多!

也能够获取普通字段的参数

640?wx_fmt=png


上传文件名的中文乱码和上传数据的中文乱码

  • 我把文件名改成中文,就乱码了

640?wx_fmt=png

  • 表单提交过来的中文数据也乱码了

640?wx_fmt=png

上面已经说了,上传文件的数据的表单进行了二进制封装,所以使用request对数据编码编码,对于表单提交过来的数据是不奏效的!

FileUpload解决乱码

使用FileUpload解决乱码问题是十分简单的

  • 解决中文文件名乱码,得到解析器以后,就直接设置解析器的编码为UTF-8就行了!


 
  • 解决表单数据乱码,在获取表单值的时候,按照UTF-8编码来获取


 

效果:

640?wx_fmt=png


SmartUpload解决乱码

这个组件解决乱码问题有点麻烦,在网上找了各种办法也没找到简单的......

所以,如果数据不涉及到中文就使用SmartUpload组件,涉及到中文数据就使用FileUpload组件吧!


多个文件上传,动态添加上传控件

假设我现在有多个文件要上传,而且要上传的个数是不确定的。那么我们要怎么办呢???

我们不可能列出很多很多个上传文件的控件在页面上,这样不美观。如果用户用不到那么多个控件,也浪费呀。

所以,我们想要动态地增添上传文件的控件,如果用户还想要上传文件,只需要动态地生成控件出来即可!

分析

要想在页面上动态地生成控件,无非就是使用JavaScript代码。

那么我们要怎么做呢??

这样子吧:当用户想要上传文件的时候,就点击按钮,按钮绑定事件,生成文件上传的控件

为了做得更加完善,每当生成了文件上传的控件,也提供一个删除按钮,删除该控件!

我们应该使用div装载着我们要生成的控件和删除按钮,而用户点击删除的时候,应该是要把删除按钮和文件上传控件都一起隐藏起来的。所以,最好就是使用嵌套div

代码

  • 页面代码:


 
  • javaScript代码


 

文件上传细节

  • 如果上传文件的大小大于我们设定文件的大小,那么文件在上传的时候会使用临时文件保存上传数据。在上传完毕后,我们应该删除临时文件

  • 上传文件的位置是不能在WEB服务器管理之下的,否则可能造成安全问题【其他人有可能通过手段来修改上传文件】

  • 如果上传文件名相同,那么就会把原本的上传文件覆盖掉。我们要生成一个独一无二的文件名。

  • 如果用户量很大,上传文件非常多。那么我们不应该在一个目录保存所有的上传文件,这样很可能造成磁盘奔溃了。所以我们要把上传的文件打散到不同的目录下

分析

删除临时文件问题是非常简单的,只需要在所有的操作完毕之后,调用FileItem的delete()方法即可

让上传文件的位置不能在WEB服务器管理之下,我们把上传文件的位置放到WEB-INF/目录下即可!

文件名相同的问题,我们可以使用UUID+用户上传的文件名来作为我们保存上传文件名。这样的文件名就是独一无二的了。

要将上传的文件进行打散,那么我们需要使用HashCode算法来进行打散

  • 低四位生成一级目录

  • 5-8位生成二级目录

代码

下面我们写一个比较完善的上传文件代码

  • 使用hashCode算法来打散保存的目录


 
  • 生成独一无二的文件名


 
  • 上传的代码


 

效果:

  • 成功把目录打散,文件名也是独一无二的了。

640?wx_fmt=png


列出上传目录下的文件,提供下载

在讲解respose对象的时候已经讲解过文件下载了。这次我们就直接写一个小案例来巩固文件下载把。

  • 上传目录下的文件有3个

640?wx_fmt=png

分析

首先,要把目录下的文件都列出来。由于后面要根据文件名对文件进行下载,所以我们用一个Map集合来保存所有的文件

下载文件部分也很简单,根据文件名和上传文件位置找到对应的文件,对其进行读写,然后修改消息头实现下载就好了。

  • 得到装载上传文件的路径,通过递归把所有的文件都查找出来(判断是否是文件就是递归出口),装载到Map集合中

  • 将Map集合传到前台做展示

  • 用户点击下载的时候,再根据原名来获取绝对路径

  • 如果该资源是存在的,就允许用户下载

代码

  • 将存放在WEB-INF/目录下的文件全部放在Map集合中


 
  • 在JSP页面中显示可以下载的文件


 
  • 实现下载的Servlet




如果文章有错的地方欢迎指正,大家互相交流。习惯在微信看技术文章的同学,可以关注微信公众号:Java3y


  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值