使用bean接收ajax表单提交数据包含文件上传

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

这几天写带图片上传的表单提交，一个配置小程序活动弹出框样式的功能，记录一下一些需要注意的地方

首先是前端 JSP 文件的表单

<form class="search-wrapper" id="spEsActivitydialogForm" method="post" role="form">
<table width="100%" class="table6" id="spEsActivitydialogTable">
<tbody>
<tr>
<td>编号</td>
<td>
<input type="text" name="id" id="id" value="2" readonly="readonly" placeholder="自动生成"/>
</td>
<td>弹出框类型<span class="xi">*</span></td>
<td><select name="type" id="type" msgg="弹出框类型" >
<option value="1">统一弹出框</option>
</select></td>
<td>是否显示按钮2<span class="xi">*</span></td>
<td><select name="hasbtntwo" id="hasbtntwo" msgg="是否显示按钮2" onchange="hasbtntwoChange(this)">
<option value="0">否</option>
<option value="1">是</option>
</select></td>
</tr>
<tr>
<td>按钮一文字<span class="xi">*</span></td>
<td><input type="text" name="btnonetext" id="btnonetext" msgg="按钮一文字"/></td>
<td>按钮一颜色<span class="xi">*</span></td>
<td><input type="text" name="btnonecolor" id="btnonecolor" msgg="按钮一颜色"/></td>
<td>按钮二文字<span class="xi">*</span></td>
<td><input type="text" name="btntwotext" id="btntwotext" /></td>
</tr>
<tr>
<td>按钮二颜色<span class="xi">*</span></td>
<td><input type="text" name="btntwocolor" id="btntwocolor" /></td>
<td>按钮文字颜色<span class="xi">*</span></td>
<td><input type="text" name="btntextcolor" id="btntextcolor" msgg="按钮文字颜色"/></td>
<td>是否显示<span class="xi">*</span></td>
<td><select name="show" id="show" msgg="是否显示" >
<option value="0">否</option>
<option value="1">是</option>
</select></td>
</tr>
<tr>
<td>提示文字</td>
<td><input type="text" name="text" id="text" /></td>
<td>提示文字颜色</td>
<td><input type="text" name="textcolor" id="textcolor" /></td>
<td>模板ID<span class="xi">*</span></td>
<td><input type="text" name="csstemplate" id="csstemplate" class="e_number" msgg="模板ID" /></td>
</tr>
<tr>
<td>开始日期</td>
<td ><input type="text" name="begintime" id="begintime" class="e_ymdhms"/></td>
<td>结束日期</td>
<td ><input type="text" name="endtime" id="endtime" class="e_ymdhms"/></td>
<td>按钮一跳转链接</td>
<td><input type="text" name="gopageurl" id="gopageurl" /></td>
</tr>
<tr> <td>录入日期</td>
<td ><input type="text" name="bookdate" id="bookdate" class="e_ymdhms" /></td>
<td>录入人</td>
<td><input type="text" name="inputman" id="inputman" /></td>
<td>背景图片<span class="xi">*</span></td>
<td>
<a href="javascript:;" class="file">选择文件<input type="file" name="picture" id="picture" accept="image/*" multiple/></a>

<span class="fileerrorTip"></span>
</td>
</tr>
</tbody>
</table>
</form>

然后是bean类，SpEsActivitydialog.java

public class SpEsActivitydialog implements java.io.Serializable { private Long id;
private Byte type;
private String bgimgurl;
private Byte hasbtntwo;
private String btnonetext;
private String btntwotext;
private String btntextcolor;
private String btnonecolor;
private String btntwocolor;
private String text;
private String textcolor;
private Byte csstemplate;
private String gopageurl;
private Byte show;
private Date begintime;
private Date endtime;
private Date bookdate;
private Long inputmanid;
private String inputman; public SpEsActivitydialog() {
} public SpEsActivitydialog(Long id, Byte type, String bgimgurl,
Byte hasbtntwo, String btnonetext, String btntwotext,
String btntextcolor, String btnonecolor, String btntwocolor,
String text, String textcolor, Byte csstemplate, String gopageurl,
Byte show, Date begintime, Date endtime,Date bookdate,Long inputmanid,String inputman) {
this.id = id;
this.type = type;
this.bgimgurl = bgimgurl;
this.hasbtntwo = hasbtntwo;
this.btnonetext = btnonetext;
this.btntwotext = btntwotext;
this.btntextcolor = btntextcolor;
this.btnonecolor = btnonecolor;
this.btntwocolor = btntwocolor;
this.text = text;
this.textcolor = textcolor;
this.csstemplate = csstemplate;
this.gopageurl = gopageurl;
this.show = show;
this.begintime = begintime;
this.endtime = endtime;
this.bookdate = bookdate;
this.inputmanid = inputmanid;
this.inputman = inputman;
}
@Id
@Column(name = "id", unique = true, nullable = false, precision = 10, scale = 0)
public Long getId() {
return this.id;
} public void setId(Long id) {
this.id = id;
}
@Column(name = "type", precision = 2, scale = 0)
public Byte getType() {
return this.type;
} public void setType(Byte type) {
this.type = type;
}
@Column(name = "bgimgurl", length = 500)
public String getBgimgurl() {
return this.bgimgurl;
} public void setBgimgurl(String bgimgurl) {
this.bgimgurl = bgimgurl;
}
@Column(name = "hasbtntwo", precision = 2, scale = 0)
public Byte getHasbtntwo() {
return this.hasbtntwo;
} public void setHasbtntwo(Byte hasbtntwo) {
this.hasbtntwo = hasbtntwo;
}
@Column(name = "btnonetext", length = 15)
public String getBtnonetext() {
return this.btnonetext;
} public void setBtnonetext(String btnonetext) {
this.btnonetext = btnonetext;
}
@Column(name = "btntwotext", length = 15)
public String getBtntwotext() {
return this.btntwotext;
} public void setBtntwotext(String btntwotext) {
this.btntwotext = btntwotext;
}
@Column(name = "btntextcolor", length = 10)
public String getBtntextcolor() {
return this.btntextcolor;
} public void setBtntextcolor(String btntextcolor) {
this.btntextcolor = btntextcolor;
}
@Column(name = "btnonecolor", length = 10)
public String getBtnonecolor() {
return this.btnonecolor;
} public void setBtnonecolor(String btnonecolor) {
this.btnonecolor = btnonecolor;
}
@Column(name = "btntwocolor", length = 10)
public String getBtntwocolor() {
return this.btntwocolor;
} public void setBtntwocolor(String btntwocolor) {
this.btntwocolor = btntwocolor;
}
@Column(name = "text", length = 100)
public String getText() {
return this.text;
} public void setText(String text) {
this.text = text;
}
@Column(name = "textcolor", length = 10)
public String getTextcolor() {
return this.textcolor;
} public void setTextcolor(String textcolor) {
this.textcolor = textcolor;
}
@Column(name = "csstemplate", precision = 2, scale = 0)
public Byte getCsstemplate() {
return this.csstemplate;
} public void setCsstemplate(Byte csstemplate) {
this.csstemplate = csstemplate;
}
@Column(name = "gopageurl", length = 30)
public String getGopageurl() {
return this.gopageurl;
} public void setGopageurl(String gopageurl) {
this.gopageurl = gopageurl;
}
@Column(name = "show", precision = 2, scale = 0)
public Byte getShow() {
return this.show;
} public void setShow(Byte show) {
this.show = show;
}
@Temporal(TemporalType.TIMESTAMP)
@Column(name = "begintime", length = 29)
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
public Date getBegintime() {
return this.begintime;
}
@JsonDeserialize(using=CustomDateDeserialize.class)
public void setBegintime(Date begintime) {
this.begintime = begintime;
}
@Temporal(TemporalType.TIMESTAMP)
@Column(name = "endtime", length = 29)
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
public Date getEndtime() {
return this.endtime;
}
@JsonDeserialize(using=CustomDateDeserialize.class)
public void setEndtime(Date endtime) {
this.endtime = endtime;
}
@Temporal(TemporalType.TIMESTAMP)
@Column(name = "bookdate", length = 29)
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
public Date getBookdate() {
return bookdate;
}
@JsonDeserialize(using=CustomDateDeserialize.class)
public void setBookdate(Date bookdate) {
this.bookdate = bookdate;
}
@Column(name = "inputmanid", precision = 10, scale = 0)
public Long getInputmanid() {
return inputmanid;
} public void setInputmanid(Long inputmanid) {
this.inputmanid = inputmanid;
}
@Column(name = "inputman", length = 10)
public String getInputman() {
return inputman;
} public void setInputman(String inputman) {
this.inputman = inputman;
}}

然后是JS 中ajax提交数据

//保存表单方法
function submitForm(){
var formData = new FormData($("#spEsActivitydialogForm")[0]); //直接把表单放入FormData()对象中
showLoading();
$.ajax({
type : "POST", //必须是POST
url : "saveSpEsActivitydialog?"+_csrfName+"="+_csrfValue,
data:formData,
async: false,
cache: false,
contentType: false, //必须有
processData: false, //必须有
success : function(data) {
if(data.code== 1){
location.href = "spEsActivitydialog";
}else{
clearLoading();
SimplePop.alert(data.msg);
}
},
error: function(){
clearLoading();
SimplePop.alert("操作失败");
}
});}

最后 Controller 里配置

@ResponseBody
@RequestMapping(value = { "/SpEsActivitydialogAPI/saveSpEsActivitydialog" }, method = {RequestMethod.GET, RequestMethod.POST })
public ResultMsg saveSpEsActivitydialog(@RequestParam(value = "picture") MultipartFile[] picture,SpEsActivitydialog spEsActivitydialog, HttpServletRequest request) {
ResultMsg msg = new ResultMsg(0, "操作失败");
try {
...省略...
}catch (Exception e) {
msg =new ResultMsg(0, e.getMessage());
}
return msg;
}

过程中遇到几点

传到后台一直报400错误，就是转为javabean有问题，找了很久原来是时间类型的参数传递问题，javabean里在时间类型的参数上加上这两句就成功了

@JsonDeserialize此注解用于setter方法上，用于在反序列化时可以嵌入我们自定义的代码

贴一下 CustomDateDeserialize.class里面的代码

public class CustomDateDeserialize extends JsonDeserializer<Date> { private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); @Override
public Date deserialize(JsonParser jp, DeserializationContext ctxt)
throws IOException, JsonProcessingException { Date date = null;
try {
if(!StringUtils.isBlank(jp.getText())){
date = sdf.parse(jp.getText());
}
} catch (ParseException e) {
sdf = new SimpleDateFormat("yyyy-MM-dd");
if(jp!=null){
try {
date = sdf.parse(jp.getText());
} catch (ParseException e1) {
}
}
}
return date;
}
}