基于jQuery的ajax方式的图片上传

文件上传一般有两种方式：

• 一是将文件直接以二进制的方式存储在数据库中，这种方式读取影响性能
• 二是数据库直接存储文件的URL地址，读取文件的话直接根据数据库存储的URL地址进行读取。

所以，一般来说我们采用方式二！
html页面

$("#upload-btn").click(function () {
var formData = new FormData($("#addPhotoForm")[0]);//对于文件类型的数据不能转化为json字符串，所以需要new FormData()
$.ajax({
url: "${pageContext.request.contextPath}/student/upload_photo",
type: "POST",
data: formData,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success: function (data) {
if (data.type == "success") {
$.messager.alert("消息提醒",data.msg,"info");
$("#photo-preview").attr("src",data.src);//将文件的位置添加到图片预览处
$("#add_photo").val(data.src);//将文件上传的地址添加到隐藏的文本域中，用于之后将位置上传到数据库
//关闭窗口
$("#editDialog").dialog("close");
}
if (data.type == "error") {
$.messager.alert("消息提醒",data.msg,"info");
}
//$("#photo-preview").hide();//隐藏照片
}
});
});

<form id="addPhotoForm" method="post" enctype="multipart/form-data" action="/upload_photo" target="photo_target">
<table id="addTable1" cellpadding="8">
<tr >
<td>预览头像:</td>
<td>
<img id="photo-preview" src="" alt="照片" style="max-width: 100px; max-height: 100px;" title="照片"  />
</td>
</tr>
<tr>
<td>学生头像:</td>
<td>
<input id="add-upload-photo" class="easyui-filebox" name="photo" data-options="prompt:'选择照片'" style="width:200px;">
<a id="upload-btn" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">上传图片</a>
</td>
</tr>
</table>
</form>

**Springmvc的Controller页**
@RequestMapping(value="/upload_photo",method= RequestMethod.POST)
@ResponseBody
public Map<String,String> uploadPhoto(MultipartFile photo,HttpServletRequest request){
Map<String,String> map = new HashMap<>();
if (photo == null){
map.put("type","error");
map.put("msg","请选择一张图片");
return map;
}
//判断文件名大小是否过大
if (photo.getSize() >= 10485760){
map.put("type","error");
map.put("msg","文件大小超过10M");
return map;
}
//保存位置
String path = request.getSession().getServletContext().getRealPath("/photo/");
//判断文件夹是否存在，无则建
File file = new File(path);
if (!file.exists()){
file.mkdirs();
}
//给文件名起唯一值
String filename = photo.getOriginalFilename();
String uuid = UUID.randomUUID().toString().replace("-","");
//保存文件
filename = uuid+"_"+filename;
try {
photo.transferTo(new File(path,filename));//保存文件
} catch (IOException e) {
map.put("type","error");
map.put("msg","上传失败");
return map;
}
HttpSession session = request.getSession();
map.put("src",session.getServletContext().getContextPath()+"/photo/"+filename);//获取文件的路径
map.put("type","success");
map.put("msg","上传成功");
return map;
}