利用servlet3.0特性 上传图片的相关知识
由于毕业设计需要,花了一天时间去好好研究这个,这里首先说明具体的实现,再讲解!
前端:因为用ajax请求,所以这边就没有用form表单提交的方式,而是自己写了个ajax请求;
<dev class="form-horizontal">
<h4>商家用户注册</h4>
<div class="form-group">
<label class="col-sm-4 control-label">商铺名称</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="user_name" name="user_name" placeholder="请输入你的名字:">
<span class="form-result" id="name_result"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">商家电话</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="user_phone" name="user_phone" placeholder="请输入你的电话号码:">
<span class="form-result" id="phone_result"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">商家邮箱</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="user_email" name="user_email" placeholder="请输入你的邮箱:">
<span class="form-result" id="email_result"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">营业执照</label>
<div class="col-sm-8">
<a class="btn btn-default form-control" id="upload" href="javascript:;">营业执照上传</a>
<input class="hide" type="file" id="user_img" name="img_upload" accept="image/jpg,image/png,image/jpeg">
<input class="form-control" type="text" id="img_url" name="user_img" readonly="true">
<span class="form-result" id="img_result"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">商家密码</label>
<div class="col-sm-8">
<input class="form-control" type="password" id="user_pwd" name="user_password" placeholder="请输入你的密码:">
<span class="form-result" id="pwd_result"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">密码确认</label>
<div class="col-sm-8">
<input class="form-control" type="password" id="pwd_confirm" name="password_confirm" placeholder="请再输入你的密码:">
<span class="form-result" id="confirm_result"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">用户类型</label>
<div class="col-sm-8">
<select class="form-control" name="user_type" disabled>
<option value="1">商家用户</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label"></label>
<div class="col-sm-8">
<button class="btn btn-lg btn-success btn-block" id="submit" type="button" onclick="registerUser()">注册</button>
</div>
</div>
</dev>
js代码:
function registerUser() {
var user_name = $('#user_name').val();
var user_phone = $('#user_phone').val();
var user_email = $('#user_email').val();
var user_pwd = $('#user_pwd').val();
var pwd_confirm = $('#pwd_confirm').val();
var user_type = 1;
if(user_name == "" || user_phone == "" || user_email == "" || user_pwd == ""){
sweetAlert("WARNING","请填写用户完整信息","warning");
return false;
}
if (user_pwd != pwd_confirm){
sweetAlert("WARNING","前后密码不一致","warning");
return false;
}
var formData = new FormData();
formData.append("user_name",user_name);
formData.append("user_phone",user_phone);
formData.append("user_email",user_email);
formData.append("user_password",user_pwd);
formData.append("password_confirm",pwd_confirm);
formData.append("user_type",user_type);
formData.append("user_img",$('#user_img')[0].files[0]);
$.ajax({
url:'/upload',
type:'post',
cache:false,
data:formData,
processData:false,
contentType:false,
timeout:60000,
beforeSend:function () {
$("#submit").empty();
$("#submit").html("<img height='30' width='30' src='/image/loading.gif'/>");
$("#submit").addClass("disabled");
},
success:function (data) {
if (data.status === "User_Empty"){
sweetAlert("WARNING","请填写用户完整信息","warning");
}else if (data.status === "Different_PWD"){
$("#pwd_confirm").addClass("form-error");
$("#confirm_result").html("前后密码不一致");
}else if (data.status === "Image_Needed"){
sweetAlert("WARNING","请上传商家执照","warning");
}else if (data.status === "Image_Fail"){
sweetAlert("ERROR","图片上传失败,请重新上传","error");
}else if (data.status === "Register_Fail"){
sweetAlert("ERROR","注册失败,请重试","error");
}else if (data.status === "Register_Repeated"){
sweetAlert("ERROR","该号码已经注册","error");
}else if (data.status === "Check_Fail"){
sweetAlert("ERROR","请填写用户完整信息","error");
}else if (data.status === "Register_Fail"){
sweetAlert("ERROR","注册失败","error");
}else if (data.status === "Upload_Fail"){
sweetAlert("ERROR","图片上传失败,请重新上传","error");
}else if (data.status === "Register_Success"){
swal({
title: "Success",
text: "注册成功",
type: "success",
showCancelButton: false,
closeOnConfirm: true,
confirmButtonText: "确定"
}, function() {
window.location.href = data.url;
});
setTimeout(function(){
window.location.href = data.url;
},3000);
}else if (data.status === "Unformatted_Phone"){
$("#user_phone").addClass("form-error");
$("#phone_result").html("电话号码格式不正确");
}else if (data.status === "Unformatted_Email"){
$("#user_email").addClass("form-error");
$("#email_result").html("邮箱格式不正确");
}else if (data.status === "Unformatted_Password"){
$("#user_pwd").addClass("form-error");
$("#pwd_result").html("密码需含有字母、数字以及密码长度在6-15位之间");
}else {
swal({
title: "ERROR",
text: "注册异常",
type: "error",
showCancelButton: false,
closeOnConfirm: true,
confirmButtonText: "确定"
}, function() {
});
}
},
complete:function () {
$("#submit").empty();
$("#submit").html("注册");
$("#submit").removeClass("disabled");
},
error:function (jqXHR) {
$("#submit").empty();
$("#submit").html("注册");
$("#submit").removeClass("disabled");
sweetAlert("发生错误",jqXHR.status,"error");
}
});
return false;
}
servlet代码:
@WebServlet("/upload")
@MultipartConfig
@Component
public class UploadServlet extends HttpServlet {
private ApplicationContext applicationContext = new ClassPathXmlApplicationContext("classpath:*.xml");
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) {
HomeRegisterService homeRegisterService = (HomeRegisterService) applicationContext.getBean("homeRegisterService");
LoggerService loggerService = (LoggerService) applicationContext.getBean("loggerService");
PrintWriter out = null;
UploadResult result = new UploadResult();
try {
response.setCharacterEncoding("utf-8");
response.setContentType("application/json");
out = response.getWriter();
String user_phone = request.getParameter("user_phone");
String user_name = request.getParameter("user_name");
String user_email = request.getParameter("user_email");
String user_password = request.getParameter("user_password");
String password_confirm = request.getParameter("password_confirm");
String user_type = request.getParameter("user_type");
System.out.println("user_name:" + user_name + " user_phone:" + user_phone + " user_email:" + user_email + " user_type:" + user_type + " user_password:" + user_password + " password_confirm:" + password_confirm);
if (user_phone == null || user_name == null || user_email == null || user_password == null) {
throw new EmptyException("User_Empty");
} else if (!user_password.equals(password_confirm)) {
throw new BaseException("Different_PWD");
}else if (!CheckUtil.checkMobileFormat(user_phone)){
throw new BaseException("Unformatted_Phone");
}else if (!CheckUtil.checkEmailFormat(user_email)){
throw new BaseException("Unformatted_Email");
}else if (!CheckUtil.checkPasswordFormat(user_password)){
throw new BaseException("Unformatted_Password");
}
loggerService.insertLog("user_name:" + user_name + " user_phone:" + user_phone + " user_email:" + user_email + " user_type:" + user_type + " user_password:" + user_password + " password_confirm:" + password_confirm);
User user = User.instance(user_name, user_phone, user_password, user_email, Integer.parseInt(user_type));
if (homeRegisterService.checkExist(user) != 0){
throw new BaseException("Register_Repeated");
}
Part part = request.getPart("user_img");
String header = part.getHeader("content-disposition");
System.out.println("header:=="+header);
String fileName = header.substring(header.lastIndexOf("=") + 2, header.lastIndexOf("\""));
System.out.println("fileName:=="+fileName);
String file_path = getServletContext().getRealPath("/upload/business");
System.out.println("file_path:=="+file_path);
String newFileName = UUID.randomUUID() + fileName;
System.out.println("newFileName:=="+newFileName);
user.setUser_img(newFileName);
if (homeRegisterService.registerUser(user) == 0) {
throw new BaseException("Register_Fail");
} else {
part.write(file_path + "/" + newFileName);
result.setStatus("Register_Success");
result.setMsg("Register_Success");
result.setUrl("/login/jumpTologinPage.action?flag=1");
}
}catch (FileNotFoundException e){
result.setStatus("Upload_Fail");
result.setMsg(e.getMessage());
loggerService.insertLog(e.getMessage());
} catch (ServletException e) {
result.setStatus("Upload_Fail");
result.setMsg(e.getMessage());
loggerService.insertLog(e.getMessage());
} catch (IOException e) {
result.setStatus("Upload_Fail");
result.setMsg(e.getMessage());
loggerService.insertLog(e.getMessage());
} catch (EmptyException e) {
result.setStatus(e.getMessage());
result.setMsg(e.getMessage());
loggerService.insertLog(e.getMessage());
} catch (BaseException e) {
result.setStatus(e.getMessage());
result.setMsg(e.getMessage());
loggerService.insertLog(e.getMessage());
}
out.print(Json.toJson(result).toString());
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
}
因为是文件和数据一起提交,一开始采用的是用commons-io,commons_fileUpload这两个包来实现的,但是一直不成功,所以就用了这种方法,因为servlet3.0的特性,使得它变得很容易。
前端代码就不讲了,比较简单;js那一块,主要是要将数据封装成FormDat对象,(form的enctype属性为编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,默认为application/x-www-form-urlencoded。 当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2...),然后把这个字串append到url后面,用?分割,加载这个新的url。 当action为post时候,浏览器把form数据封装到http body中,然后发送到server。 如果没有type=file的控件,用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话,就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割,并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息,并加上分割符(boundary)),FormData对象会将enctype自动转为multipart/form-data,所以这里不用再做多操作,这里要注意的是,
processData
设置为false
。因为data
值是FormData
对象,不需要对数据做处理。<form>
标签添加enctype="multipart/form-data"
属性。cache
设置为false
,上传文件不需要缓存。contentType
设置为false,不设置contentType值,
因为是由<form>
表单构造的FormData
对象,且已经声明了属性enctype="multipart/form-data"
,所以这里设置为false。
在servlet那端,普通属性可以通过request.getParameter(”属性名”)来获得,而文件的话,则通过servlet3.0的特性 Part = request.getPart(“id”);来获得,通过相关的解析,可以直接用part.write(“文件名”)将文件上传至服务器目录.
因为本项目中是需要注册的,所以需要调用service端的方法去调用dao层的方法,一开始本来是通过spring的注解方法得到servcie对象,但是发现一直报空,后来查找了一下原因,发现原来servlet是不属于spring容器的,所以无法通过主节的方式得到service对象,所以后来采用了
private ApplicationContext applicationContext = new ClassPathXmlApplicationContext("classpath:*.xml");这种方式,
首先在resource目录下添加一个配置文件,文件的内容是:
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.2.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.2.xsd ">
<bean id="homeRegisterService" class="com.xulibing.book.service.impl.HomeRegisterServiceImpl"/>
<bean id="loggerService" class="com.xulibing.book.service.impl.LoggerServiceImpl"></bean>
</beans>
然后在servlet端可以通过
HomeRegisterService homeRegisterService = (HomeRegisterService) applicationContext.getBean("homeRegisterService");
这种方式去获得。