展示效果：
image.png
前端代码：
<button type="button" class="layui-btn" id="test1"" >
<i class="layui-icon"></i>点击上传PDF
</button>
<script>
layui.use(['layer', 'upload'], function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: '<%=path%>/SavePdf' //上传接口
,accept:'file'
,multiple:true
,done: function(res){
alert(res.msg)
}
,error: function(){
//请求异常回调
}
});
});
</script>
后端代码：
需要的jar包:
![]()
image.png
image.png
注意：如果web项目是3.0以下的同学，servlet需要在web.xml中配置）
@WebServlet("SavePdf")
public class SavePdf extends HttpServlet {
public void doPost( HttpServletRequest request, HttpServletResponse response )
throws ServletException, IOException {
//得到上传文件的保存目录，我项目里是在web目录下创建/attachFiles/detections/
String savePath = this.getServletContext().getRealPath("/attachFiles/detections/");
File file = new File(savePath);
//判断上传文件的保存目录是否存在
if (!file.exists() && !file.isDirectory()) {
System.out.println(savePath + "目录不存在，需要创建");
//创建目录
file.mkdir();
}
//消息提示
String message = "";
try {
//使用Apache文件上传组件处理文件上传步骤：
//1、创建一个DiskFileItemFactory工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//2、创建一个文件上传解析器
ServletFileUpload upload = new ServletFileUpload(factory);
//解决上传文件名的中文乱码
upload.setHeaderEncoding("UTF-8");
//3、判断提交上来的数据是否是上传表单的数据
if (!ServletFileUpload.isMultipartContent(request)) {
//按照传统方式获取数据
return;
}
//4、使用ServletFileUpload解析器解析上传数据，解析结果返回的是一个List<FileItem>集合，每一个FileItem对应一个Form表单的输入项
List<FileItem> list = upload.parseRequest(request);
for (FileItem item : list) {
//如果fileitem中封装的是普通输入项的数据
if (item.isFormField()) {
String name = item.getFieldName();
//解决普通输入项的数据的中文乱码问题
String value = item.getString("UTF-8");
//value = new String(value.getBytes("iso8859-1"),"UTF-8");
System.out.println(name + "=" + value);
} else {//如果fileitem中封装的是上传文件
//得到上传的文件名称
String filename = item.getName();
System.out.println(filename);
if (filename == null || filename.trim().equals("")) {
continue;
}
//注意：不同的浏览器提交的文件名是不一样的，有些浏览器提交上来的文件名是带有路径的，如： c:\a\b\1.txt，而有些只是单纯的文件名，如：1.txt
//处理获取到的上传文件的文件名的路径部分，只保留文件名部分
filename = filename.substring(filename.lastIndexOf("\\") + 1);
//获取item中的上传文件的输入流
InputStream in = item.getInputStream();
//创建一个文件输出流
FileOutputStream out = new FileOutputStream(savePath + filename);
//创建一个缓冲区
byte buffer[] = new byte[1024];
//判断输入流中的数据是否已经读完的标识
int len = 0;
//循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据
while ((len = in.read(buffer)) > 0) {
//使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\" + filename)当中
out.write(buffer, 0, len);
}
//关闭输入流
in.close();
//关闭输出流
out.close();
//删除处理文件上传时生成的临时文件
item.delete();
message = count + "个文件上传成功！";
System.out.println(message);
}
}
} catch (Exception e) {
message = "文件上传失败！";
e.printStackTrace();
}
}
}
注意细节：
1.文件上传请求是post。
2.本例子虽然可以实现多文件上传，但是这里layui前端是有几个文件发几次请求。
3.文件上传的request的头部：
Content-Type: multipart/form-data;
boundary=----WebKitFormBoundaryfAxNycIXSKym6y6k
注：boundary后面的是一串符号，标记着文件的分割。
image.png
