AJAX 上传图片到磁盘并通过restful保存图片路径到数据库 添加客户操作
1.form表单,包括其他字段
<form class="form-horizontal" enctype="multipart/form-data" >
<div class="card-body" >
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">客户名称</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" id="name" placeholder="请输入名称">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">客户地址</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="address" id="address" placeholder="请输入地址">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">手机</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="phone" id="phone" placeholder="请输入手机号">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">QQ</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="qq" id="qq" placeholder="请输入qq">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">客户等级</label>
<div class="col-sm-10">
<select name="level" id="level" class="form-control">
<option value="选择级别" label="选择级别">---</option>
<option value="普通客户">普通客户</option>
<option value="vip客户">vip客户</option>
<option value="超级vip客户">超级vip客户</option>
<option value="钻石vip客户">钻石vip客户</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">收款账号</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="accounts" id="accounts" placeholder="请输入 收款账号">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">收款码</label>
<div class="col-sm-10">
<input type="file" name="file" id="photoFile">//photoFile绑定函数内的代码获取二进制数据
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input type="button" id="submit" class="form-control" value="提交">
</div>
</div>
</div>
<!-- /.card-footer -->
</form>
2.JS代码
//ID为submit的按钮绑定单击事件执行保存函数
$("#submit").click(function(){
//alert(888);
upload();//调用上传图片方法
//创建客户对象
$customer={"name": $("#name").val(),
"address": $("#address").val(),
"phone": $("#phone").val(),
"qq": $("#qq").val(),
"level": $("#level").val(),
"accounts": $("#accounts").val()
};
//alert($("#name").val())
//传递对象到后台保存的AJAX
$.ajax({
cache: false,
crossDomain: true,
url: "http://localhost:8080/customers",
type: "POST",
dataType:"json",
contentType:"application/json",
data:JSON.stringify($customer),
success: function(data) {
console.log(data);
alert(data);
},
error: function (msg, url, line) {
console.log(msg);
alert(msg.responseText);//添加客户信息成功弹出消息
//alert('msg = ' + msg + ', url = ' + url + ', line = ' + line);
}
})
});
/**
* 上传图片
*/
function upload() {
if ($("#photoFile").val() == '') {
return;
}
var formData = new FormData();
//获取图片二进制流
formData.append('photo', document.getElementById('photoFile').files[0]);
$.ajax({
url: "http://localhost:8080/customers/uploadPhoto",
type: "post",
data: formData,
contentType: false,
processData: false,
success: function (data) {
if (data.type == "success") {
} else {
alert(data.msg);
}
},
error: function (data) {
alert("上传失败")
}
});
}
.3.控制器代码
//图片路径URL
public String url;
//保存图片代码,同时将图片路径赋值给变量url
@CrossOrigin
@RequestMapping(value = "/customers/uploadPhoto", method = RequestMethod.POST)
@ResponseBody
public Map<String, String> uploadPhoto(MultipartFile photo, HttpServletRequest request) {
Map<String, String> ret = new HashMap<String, String>();
if (photo == null) {
ret.put("type", "error");
ret.put("msg", "选择要上传的文件！");
return ret;
}
if (photo.getSize() > 1024 * 1024 * 10) {
ret.put("type", "error");
ret.put("msg", "文件大小不能超过10M！");
return ret;
}
//获取文件后缀
String suffix = photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf(".") + 1, photo.getOriginalFilename().length());
if (!"jpg,jpeg,gif,png".toUpperCase().contains(suffix.toUpperCase())) {
ret.put("type", "error");
ret.put("msg", "请选择jpg,jpeg,gif,png格式的图片！");
return ret;
}
//获取项目根目录加上图片目录 webapp/static/imgages/upload/
String savePath = "C:\\img\\";
System.out.println(savePath);
File savePathFile = new File(savePath);
if (!savePathFile.exists()) {
//若不存在该目录，则创建目录
savePathFile.mkdir();
}
String filename = new Date().getTime() + "." + suffix;
try {
//将文件保存指定目录
photo.transferTo(new File(savePath + filename));
} catch (Exception e) {
ret.put("type", "error");
ret.put("msg", "保存文件异常！");
e.printStackTrace();
return ret;
}
ret.put("type", "success");
ret.put("msg", "上传图片成功！");
ret.put("filepath","C:\\img\\");
ret.put("filename", filename);
System.out.println(filename);
url=savePath+filename;
return ret;
}
//添加客户信息的代码
@CrossOrigin
@RequestMapping(value = "/customers", method = RequestMethod.POST, headers = "Accept=application/json")
public ResponseEntity<Object> addCustomer(@RequestBody Customer customer) {
customer.setUrl(url);
customerMapper.insert(customer);
url=null;
return new ResponseEntity<>("添加成功", HttpStatus.CREATED);
}
