1.首先
<script type="text/javascript" src="../js/ajaxfileupload.js"></script>
2.前端
<form class="am-form am-form-horizontal" id="informationSubit" enctype="multipart/form-data">
<!--头像 -->
<div class="user-infoPic">
<div id="preview"></div>
<div class="filePic">
<input type="file" class="inputPic" id="imageFile" name="imageFile" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
<img class="am-circle am-img-thumbnail" src="../images/getAvatar.do.jpg" alt="" />
</div>
<div id="picTip"></div>
<p class="am-form-help">头像</p>
<div class="info-btn">
<input type="button" onclick="submitForm()" class="am-btn am-btn-danger" value="确定修改头像" />
</div>
</div>
</div>
</form>
3.js
function submitForm() {
var type = "1";//展示照片
var f = $("#imageFile").val();
if(null == f || f == ""){
$("#picTip").html("<span style = 'color : red' >错误提示:上传图片不能为空,请重新选择文件</span>");
return false;
}else{
var extname = f.substring(f.lastIndexOf(".")+1,f.length);
extname = extname.toLowerCase(); // 处理大小写
if(extname != "jpeg" && extname != "jpg" && extname != "gif" && extname != "png"){
$("#picTip").html("<span style = 'color : red'>错误提示:格式不正确,支持的图片格式为:JPEG、GIF、PNG!</span>");
return false;
}
}
//默认是单张图片 如果上传多张图片需判断
var size = $("#imageFile").size;
if(size > 2097152){
$("#picTip").html("<span style='color:Red'>错误提示:所选择的图片太大,图片大小最多支持2M!</span>")
return false;
}
informationSubit(name,type);
}
function informationSubit() {
$.ajaxFileUpload({
url :base_path+"/user/changeTouXiang.action?type = +1",
secureuri : false,
fileElementId : "imageFile", //文件上传空间的id属
type : "POST",
dataType : "json",
data:null,
success : function(data , status){
var path = data.path;
$("#picTip").html("<span style = 'color : red'>图片上传成功:图片地址为:path</span>")
window.location.reload(); //重定向
},
error : function(data, status,e) {
$("#picTip").html("<span style = 'color : red'>服务器响应失败处理函数!</span>")
}
});
return false;
}
4.后台代码
@RequestMapping("/user/changeTouXiang.action")
@ResponseBody
public Map<String, Object> changeTouXiang(HttpServletRequest request) {
MultipartResolver resolver=
new CommonsMultipartResolver(request.getSession().getServletContext());
MultipartHttpServletRequest multipartHttpRequest =
resolver.resolveMultipart(request);
MultipartFile file = multipartHttpRequest.getFile("imageFile");
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("filePath", file);
return map;
}