js代碼
//上傳頭像的方法
var uploadInst = upload.render({
elem: '#test1' /*根據綁定id,打開本地圖片*/
,url: '/reg' /*上傳后台接受接口*/
,auto: false /*true為選中圖片直接提交,false為不提交根據bindAction屬性上的id提交*/
,bindAction: '#get'
,drag:true
,auto: false
,choose:function(obj){
//預讀本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#photo').attr('src', result); //圖片鏈接(base64)
});
}
,done: function(res){
//如果上傳失敗
if(res.code > 0){
return layer.msg('上傳失敗');
}
//上傳成功
}
,error: function(){
//演示失敗狀態,並實現重傳
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload">重試</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
//提交表單的方法
form.on('submit(reg)', function (data) {
var fd = new FormData();
var formData = new FormData($( "#userForm" )[0]);
$.ajax({
cache : true,
type : "post",
url : "/reg",
async : false,
data : formData, // 你的formid
contentType: false, //jax 中 contentType 設置為 false 是為了避免 JQuery 對其操作,從而失去分界符,而使服務器不能正常解析文件
processData: false, //當設置為true的時候,jquery ajax 提交的時候不會序列化 data,而是直接使用data
error : function(request) {
layer.alert('操作失敗', {
icon: 2,
title:"提示"
});
},
success : function(ret) {
if (ret.success) {
layer.alert('注冊成功', {
icon: 2,
title:"提示"
});
layer.closeAll();
window.location.href="/login";
} else {
layer.alert(ret.msg, {
icon: 2,
title:"提示"
});
}
}
})
});
后台代碼
@ResponseBody
@RequestMapping ("/reg")
public JsonResult save(MultipartFile file, User user, HttpServletRequest request){
try {
String path = request.getSession().getServletContext().getRealPath("upload");
String pathPhoto = "/upload";
if(!file.isEmpty()){
String name = file.getOriginalFilename();//獲取接受到的圖片名稱
String newFileName = UUID.randomUUID().toString().substring(0,5)+"."+ FilenameUtils.getExtension(name);
File fi = new File(path,newFileName); //將path路徑與圖片名稱聯系在一起
if(!fi.getParentFile().exists()){ //判斷是否存在path路徑下的文件夾
fi.getParentFile().mkdirs(); //不存在創建path路徑下的文件夾
}
file.transferTo(fi); //上傳圖片
user.setImgurl(pathPhoto+"/"+newFileName); //為保存圖片路徑
}
if(!StringUtil.isEmpty(user.getName()) && !StringUtil.isEmpty(user.getPassword())){
userService.save(user);
}
} catch (Exception e) {
e.printStackTrace();
return new JsonResult(false,e.getMessage());
}
return new JsonResult();
}