上一次通过formData来上传图片与相关信息给服务器,这一次通过接受服务端json响应来完成form表单的提交。
通过查看webuploader官网文档,我们可以找到如下方法
其中data就是服务段传递给我们的数据,我们可以通过data来设置图片存储的路径信息等。
1 后台将图片信息向数据库提交,同时向前端发送json响应
@RequestMapping(value="/add.do",method=RequestMethod.POST)
public @ResponseBody AjaxResult addSubmit(String username,@RequestParam("img") String img) {
if(username==""|| img=="") {
return new AjaxResult("error","参数不能为空");
}
Coach coach=new Coach();
coach.setImg(img);
coach.setName(username);
if(coachService.insert(coach)>0) {
return new AjaxResult("ok", "ok");
};
return new AjaxResult("error","数据库出错");
}
AjaxResult是我自己定义的一个类,用来记录返回信息
public class AjaxResult {
private String status; //表示响应状态,规定"success"表示成功,"error"表示失败
private Object data; //表示响应信息,既可以是提示信息,也可以是json格式的对象数据
public AjaxResult() {
}
public AjaxResult(String status, Object data) {
this.status = status;
this.data = data;
}
public static AjaxResult errorInstance(Object data) {
return new AjaxResult("error", data);
}
public static AjaxResult successInstance(Object data) {
return new AjaxResult("success", data);
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}
我们通过ajaxresult中的data来记录图片信息。并传递给前端。
2 我们使用uploadAccept来接受服务段传回的信息
uploader.on('uploadAccept',function(object,ret){
if(ret.status=='1'){
$("#imgSrc").attr('value',ret.data);
return true;
}
} );
这个ret是接受我服务器端的返回值,ret.status 是判断是否成功,ret.data 是记录的图片信息,“#imgSrc”是我在表单设置的一个隐藏id用来记录上传图片的信息。
2 使用ajax提交表单信息
$("#btnClick").click(function(){
var username=$("#username").val();
var img=$("#imgSrc").val();
$.ajax({
type:"post",
url:"<%=ctxPath%>/Coach/add.do",
data:{username:username,img:img},
success:function(res){
if(res.status=="ok"){
location.reload();
}else{
alert(data);
}
},
error:function(){
alert("error error");
}
});
});
username是表单user的值,在获取到username和imgSrc的值后,就通过ajax方式提交给服务器将图片和表单信息的记录到数据中,提交给服务器代码我就不介绍了,如果有问题可以和我讨论。