前言
只有光头才能变强。
文本已收录至我的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代码