前言

只有光头才能变强。

文本已收录至我的GitHub仓库，欢迎Star：https://github.com/ZhongFuCheng3y/3y

什么是文件上传？

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

为什么需要文件上传？

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

上传组件(工具)

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

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

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

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

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

<form action="${pageContext.request.contextPath }/servlet/UploadServlet1" enctype="multipart/form-data" method="post">

• http抓包

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

"username");

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

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

• 我们试着读取下文件

ServletInputStream inputStream = request.getInputStream();

byte[] bytes = new byte[1024];
int len = 0;

while ((len = inputStream.read(bytes)) > 0) {
  System.out.println(new String(bytes, 0, len));
}

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

<input type="text" name="password">

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

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

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

上传组件有两种

• FileUpload【操作比较复杂】

• SamrtUpload【操作比较简单】

FileUpload

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

• commons-io

• Commons-fileupload

开发步骤

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

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

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

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

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

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

快速入门

try{

测试

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

SmartUpload

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

快速入门

//实例化组件

测试

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

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

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

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

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

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

FileUpload解决乱码

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

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

//设置upload的编码

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

"UTF-8");

效果：

SmartUpload解决乱码

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

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

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

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

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

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

分析

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

那么我们要怎么做呢？？

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

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

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

代码

• 页面代码：

<table border="1px">

• javaScript代码