springmvc ajax无刷新图片上传

1.前台jsp页面需要jquey.js 和 ajaxfileupload.js

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/meta.jsp"%>
<script type="text/javascript" src="${ctx}/static/js/ajaxfileupload.js"></script>

<script type="text/javascript">
function ajaxFileUpload(){
	//开始上传文件时显示一个图片,文件上传完成将图片隐藏
	//$("#loading").ajaxStart(function(){$(this).show();}).ajaxComplete(function(){$(this).hide();});
	//执行上传文件操作的函数
	$.ajaxFileUpload({
		//处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
		url:'${ctx}/tb/report/editImage?reportId=${reportId}',
		secureuri:false,                           //是否启用安全提交,默认为false 
		fileElementId:'reportFile',               //文件选择框的id属性
		dataType:'text',                           //服务器返回的格式,可以是json或xml等
		success:function(data, status){            //服务器响应成功时的处理函数
			data = data.replace(/<pre.*?>/g, '');  //ajaxFileUpload会对服务器响应回来的text内容加上<pre style="....">text</pre>前后缀
			data = data.replace(/<PRE.*?>/g, '');
			data = data.replace("<PRE>", '');
			data = data.replace("</PRE>", '');
			data = data.replace("<pre>", '');
			data = data.replace("</pre>", '');     //本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
			if(data.substring(0, 1) == 0){         //0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
				$("img[id='uploadImage']").attr("src", data.substring(2));
				$('#result').html("<font color=\"red\"> 图片上传成功</font><br/>");
			}else{
				$('#result').html("<font color=\"red\"> 图片上传失败，请重试！！</font><br/>");
			}
		},
		error:function(data, status, e){ //服务器响应失败时的处理函数
			$('#result').html("<font color=\"red\"> 图片上传失败，请重试！！</font><br/>");
		}
	});
}
</script>

<div class="easyui-layout" data-options="fit:true"
	id="tbReportDetail_layout">
	<div data-options="region:'center'" style="padding: 10 10 10 20px;">
		<form id="tbReport_form" class="hgform">
			<table class="hgtable">
				<div id="result"></div>
				<tr>
					<td width="120px;">商品名称<font>*</font>:</td>
					<td><input disabled="disabled" class="required" type="text"
						value="${reportTitle}" style="width:120px;"></input>
					</td>
				</tr>
				<tr>
					<td width="160px;">商品图片<font>*</font>:</td>
					<td><input class="easyui-validatebox" type="file"
						id="reportFile" name="reportFile" style="width:160px;"></input>
					</td>
				</tr>
				<tr>
					<td width="160px;">图片预览<font>*</font>:</td>
					<td><img id="uploadImage" src="">
					</td>
				</tr>
				<tr>
					<td width="160px;">上传<font>*</font>:</td>
					<td><input type="button" value="上传图片"
						οnclick="ajaxFileUpload()" /></td>
				</tr>
			</table>
		</form>
	</div>
</div>

2.springmvc 后台代码

 @RequestMapping(value="/editImage",method=RequestMethod.POST)
    @UserLog(code = "editTbReportImage", name = "修改商品图片", remarkClass = TbReportImage.class)
    public String editTbReportImage(final String reportId,
    		@RequestParam("reportFile") final CommonsMultipartFile file,HttpServletResponse response, 
    		final HttpServletRequest request,Model model) {
    	if (!file.isEmpty()) {
			String path = request.getSession().getServletContext().getRealPath("/upload"); // 获取本地存储路径
			System.out.println(path);
			String fileName = file.getOriginalFilename();
			String fileType = fileName.substring(fileName.lastIndexOf("."));
			System.out.println(fileType);
			String newFileName = new Date().getTime() + fileType;
			File file2 = new File(path, newFileName); // 新建一个文件
			try {
				file.getFileItem().write(file2); // 将上传的文件写入新建的文件中
			} catch (Exception e) {
				e.printStackTrace();
			}
			TbReportImage tbReportImage = new TbReportImage(Integer.parseInt(reportId),"/upload/"+newFileName);
			tbReportImageService.insertReportImage(tbReportImage);
			
			PrintWriter out;
			try {
				out = response.getWriter();
				out.print("0`" + request.getContextPath() + "/upload/" + newFileName); 
				out.flush();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
        return null;
    }

3.测试结果