说明
使用 Servlet3 实现上传文件,非常简单,不需要依赖第三方jar包
关键
使用ajax实现上传,js有特殊写法:
- 将数据封装到
FormData
中 - 进行下面配置:
contentType: false, // 关键 processData: false, // 关键
- 将数据封装到
servlet要用
@MultipartConfig
注解
代码
html
需要引入 jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</title>
<link href="css/style.css" rel="stylesheet"/>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function (){
$("#sbmt").click(function (){
/*
根据name获取控件的值
const:该变量不需要改变
*/
const username = $("#username").val()
// 根据id获取控件的值(推荐)
const password = $("#password").val()
let ok = true
if(username.trim() === ""){
$("#uname_warn").text("请输入用户名!")
ok = false
}else{
$("#uname_warn").text("")
}
if(password.trim() === ""){
$("#pwd_warn").text("请输入密码!")
ok = false
}else{
$("#pwd_warn").text("")
}
if(ok){
//通过jq让表单提交,因为上传文件,需要将数据封装到FormData对象中
var formData = new FormData();
formData.append("head",$("#head")[0].files[0])
formData.append("username",username)
formData.append("password",password)
$.ajax({
url:'/reg', /*接口域名地址*/
type:'post',
data: formData,
contentType: false, // 关键
processData: false, // 关键
dataType:'json',//服务器返回数据的类型
success:function(res){
if(res.code == 0){
location.href="login.html"
}else{
console.log("servlet返回数据:",res,typeof(res))
console.log("msg:",res.msg)
console.log("code:",res.code)
$("#msg").text("测试数据")
$("#msg").text(res.msg)
//测试123456
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown);
}
})
}
})
})
</script>
</head>
<body>
<h1>注册页面</h1>
<label for="username">登录名:</label>
<input type="text" name="username" id="username" maxlength="8" >
<span id="uname_warn" class="warn"></span>
<br>
<label for="password">密码:</label>
<input type="password" name="password" id="password" maxlength="8">
<span id="pwd_warn" class="warn"></span>
<br>
上传头像:<input type="file" name="head" id="head">
<br>
<input type="button" value="提交" id="sbmt">
<input type="reset" >
<div id="msg" class="warn"></div>
</body>
</html>
java
需要使用Jackson jar包
关键:servlet要用 @MultipartConfig
注解,否则上传失败
package com.sys.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.sys.entity.User;
import com.sys.exception.DuplicateNameException;
import com.sys.pojo.JsonResult;
import com.sys.service.UserService;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.UUID;
@WebServlet("/reg")
@MultipartConfig
public class RegistServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Part head = req.getPart("head");
if(head!=null) {
// 上传文件才执行下面代码
if(head.getSubmittedFileName()!=null && !"".equals(head.getSubmittedFileName())) {
// 在当前工程下创建upload文件夹
// upload文件夹的绝对路径(全路径)
String upload = req.getServletContext().getRealPath("/upload");
File uploadFile = new File(upload);
if (!uploadFile.exists()) {
// 创建文件夹
uploadFile.mkdirs();
}
String uuid = UUID.randomUUID().toString().replace("-", "");
//截取文件后缀
// 拼装,uuid+文件后缀
// 拼装的是保存上传文件的全路径
File file = new File(uploadFile, head.getSubmittedFileName());
// 保存
head.write(file.getAbsolutePath());
//文件名称
System.out.println(head.getSubmittedFileName());
//文件大小
System.out.println(head.getSize());
}
}
// 通过request对象获取浏览器提交的参数
String username = req.getParameter("username");
String password = req.getParameter("password");
User user = new User();
user.setUsername(username);
user.setUpassword(password);
UserService service = new UserService();
PrintWriter writer = resp.getWriter();
JsonResult jr = new JsonResult();
try {
service.regist(user);
jr.setCode(0);
jr.setMsg("注册成功!");
} catch (DuplicateNameException e){
jr.setCode(103);
jr.setMsg(e.getMessage());
} catch (Exception e) {
jr.setCode(500);
jr.setMsg("服务器发生错误");
e.printStackTrace();
}
//将java对象,转换成 json 格式的字符串
ObjectMapper om=new ObjectMapper();
String json=om.writeValueAsString(jr);
writer.write(json);
writer.close();//关闭
}
}