概念
当用户在前端页面点击文件上传后,用户上传的文件数据提交给服务器端,实现保存。
文件上传实现步骤
提交方式
提供form表单,method必须是post。因为post请求无数据限制。
<form method="post"> </form>
提交数据格式
- 表单的enctype属性值必须为multipart/form-data。
- 以多段的形式进行拼接提交。以二进制流的方式来处理表单数据,会把指定的文件内容封装进请求参数中。
<form enctype="multipart/form-data" method="post"></form>
提供组件
提供file表单组件,提供给用户上传文件。
<!--
文件上传前端:
1、请求方式必须是post请求
2、请求格式必须要是multipart/form-data
-->
<span style="color: red">${addMsg}</span>
<form action="empAdd.do" method="post" enctype="multipart/form-data">
员工编号<input type="number" name="empno"><br>
员工姓名<input type="text" name="ename"><br>
员工职位<input type="text" name="job"><br>
员工经理<input type="number" name="mgr"><br>
入职日期<input type="date" name="hiredate"><br>
员工工资<input type="number" name="sal"><br>
员工绩效<input type="number" name="comm"><br>
部门编号<input type="number" name="deptno"><br>
员工头像<input type="file" name="file" onchange="changeImage(this)"><br>
<img id="empImg" src="" width="80px" height="80px" style="visibility:
hidden;border: 1px solid black;" ><br>
<input type="submit" value="添加">
</form>
<script>
function changeImage(e){
var image = document.getElementById("empImg");
image.style.visibility = "visible";
//将选择的图片变成一个字符串地址
var url = URL.createObjectURL(e.files[0]);
image.src = url;
}
</script>
Servlet编写
在 Servlet 3.0 及其以上版本的容器中进行服务器端文件上传的编程,是围绕着注解类型 MultipartConfig 和 javax. servlet.http.Part 接口进行的。处理已上传文件的 Servlet 必须以 @MultipartConfig 进行注解。
//表示此Servlet允许文件上传 maxFileSize:单个文件大小 maxRequestSize:总大小
@MultipartConfig(maxFileSize = 2*1024*1024,maxRequestSize = 10*1024*1024)
public class EmpAddServlet extends HttpServlet {
}
文件上传细节注意
- 文件保存在哪儿
- 文件名的问题
- 在数据库中保存什么
代码实现
public class FileUploadUtils {
/**
* 文件上传
*/
public static String upload(HttpServletRequest request) throws IOException,
ServletException {
//参数:前端表单的name属性
Part part = request.getPart("file");
/**
* 文件保存在哪儿?
* 1、当前项目中 (简单,但是out目录删除图片就没有了)
* 2、本地磁盘上 (复杂,因为要设置本地磁盘虚拟路径)
* 3、自己搭建图片服务器
* 文件名的问题?
* UUID+后缀
* 在数据库中保存什么?
* 保存文件名称
*/
//获取上传文件的名称
String fileName = part.getSubmittedFileName();
//获取文件的后缀
String fileExt = fileName.substring(fileName.lastIndexOf("."));
//重新组装一下新的文件名
fileName = UUID.randomUUID().toString()+fileExt;
File file = new File("D:\\workspace\\upload\\"+fileName);
//保存图片 参数:保存的路径
part.write(file.getAbsolutePath());
return fileName;
}
}