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

电玩女神 2021-09-30 17:42 384阅读 0赞

# 什么是文件上传？ #

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

# 为什么需要文件上传？ #

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

# 上传组件(工具) #

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

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

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

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

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

*  http抓包

![640?wx\_fmt=png][640_wx_fmt_png]

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

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

![640?wx\_fmt=png][640_wx_fmt_png 1]

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

*  我们试着读取下文件

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

*  我上传的文本文件内容就是111111，读取效果如下：

![640?wx\_fmt=png][640_wx_fmt_png 2]

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

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

--------------------

## 上传组件有两种 ##

*  **FileUpload【操作比较复杂】**
 *  **SamrtUpload【操作比较简单】**

--------------------

# FileUpload #

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

*  **commons-io**
 *  **Commons-fileupload**

## 开发步骤 ##

*  **创建解析器工厂对象【DiskFileItemFactory】**
 *  **通过解析器工厂创建解析器【ServletFileUpload】**
 *  **调用解析器方法解析request对象，得到所有上传的内容【list】**
 *  **遍历list，判断每个对象是否是上传文件**
    
     *  **如果是普通表单字段，得到字段名和字段值**
     *  **如果是上传文件，调用InputSteam方法得到输入流，读取上传的数据**

--------------------

## 快速入门 ##

### 测试 ###

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

![640?wx\_fmt=png][640_wx_fmt_png 3]

--------------------

# SmartUpload #

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

## 快速入门 ##

## 测试 ##

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

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

![640?wx\_fmt=png][640_wx_fmt_png 4]

--------------------

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

*  **我把文件名改成中文，就乱码了**：

![640?wx\_fmt=png][640_wx_fmt_png 5]

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

![640?wx\_fmt=png][640_wx_fmt_png 6]

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

## FileUpload解决乱码 ##

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

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

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

### **效果：** ###

![640?wx\_fmt=png][640_wx_fmt_png 7]

--------------------

## **SmartUpload解决乱码** ##

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

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

--------------------

# 多个文件上传，动态添加上传控件 #

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

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

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

## 分析 ##

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

那么我们要怎么做呢？？

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

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

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

## 代码 ##

*  页面代码：

*  javaScript代码

--------------------

# 文件上传细节 #

*  如果**上传文件的大小大于我们设定文件的大小**，那么文件在**上传的时候会使用临时文件保存上传数据**。在上传完毕后，我们**应该删除临时文件**
 *  **上传文件的位置是不能在WEB服务器管理之下的，否则可能造成安全问题【其他人有可能通过手段来修改上传文件】**
 *  **如果上传文件名相同，那么就会把原本的上传文件覆盖掉**。我们要生成一个独一无二的文件名。
 *  如果用户量很大，上传文件非常多。那么我们**不应该在一个目录保存所有的上传文件，这样很可能造成磁盘奔溃了**。所以我们要**把上传的文件打散到不同的目录下**。

## 分析 ##

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

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

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

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

*  **低四位生成一级目录**
 *  **5-8位生成二级目录**

## 代码 ##

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

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

*  **生成独一无二的文件名**

*  上传的代码

## 效果： ##

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

![640?wx\_fmt=png][640_wx_fmt_png 8]

--------------------

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

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

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

![640?wx\_fmt=png][640_wx_fmt_png 9]

## 分析 ##

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

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

*  **得到装载上传文件的路径，通过递归把所有的文件都查找出来（判断是否是文件就是递归出口），装载到Map集合中**
 *  **将Map集合传到前台做展示**
 *  **用户点击下载的时候，再根据原名来获取绝对路径**
 *  **如果该资源是存在的，就允许用户下载**

## 代码 ##

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

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

*  实现下载的Servlet

--------------------

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

[640_wx_fmt_png]: /images/20210827/0d219c39aa6e4ce7922401d4763789aa.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210827/01ad02439e4244e680bc8701407c670d.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210827/15a803d7ef054e8187f40eeabeb898ef.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210827/5dac7702ac0e4641ba7a2a32c8c1965d.png?wx_fmt=png
[640_wx_fmt_png 4]: /images/20210827/27ce6ed96d17479b94fc8ceb401b942c.png?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210827/a249a5dafb9a4dc4a7a1603cee03180c.png?wx_fmt=png
[640_wx_fmt_png 6]: /images/20210827/633cf5a2c53749e68b0a9a88fa0bcc9d.png?wx_fmt=png
[640_wx_fmt_png 7]: /images/20210827/c3fdba0c50f94993badc9a0020d86817.png?wx_fmt=png
[640_wx_fmt_png 8]: /images/20210827/72989c6b4ef441669b85927e7c68a581.png?wx_fmt=png
[640_wx_fmt_png 9]: /images/20210827/546cbeae22664886ac0797233192f0d0.png?wx_fmt=png