ajax上传图片，返回路径并即时回显的功能

html代码：

说明：隐藏的input框可以不需要，因为我是要在别的地方用到所以添加的隐藏input框

<!--流程图上传的表单  -->
<form name="dateupload" method="post" enctype="multipart/form-data" id="ss">
		<table width="80%" class="yewzn-tab" id="st">
				<td width='12%' class='gi'>经办流程图:</td>
				<td colspan="3">
					<input type="file" name="file" id="fil">
					<button type="button" οnclick="tijiao()" class="yewzn-but-change">提交</button> 
					 <input name="flowChart" type="hidden"  id="sql2"> 
				</td>
		</table>
</form>

js代码：

<script type="text/javascript">
//业务指南上传图片
   function tijiao(){  
	var node = $("#businessTypeList").tree("getSelected");
	if(node == null || node == ""){
		$.messager.alert("提示", "没有选择业务类型，无法上传文件！", "info");
	}else{
		var form = new FormData(document.getElementById("ss"));  
	    $.ajax({  
	        url : '${pageContext.request.contextPath}/businessGuide/insertImg.jt?id='+node.id,  
	        data : form,  
	        type : 'post',  
	        processData:false,  
	        contentType:false,  
	        success : function(data){  
	        	var data = JSON.parse(data);
				if(data.b==true){
 		        	$("#sql1").val(data.desc);
		        	$("#sql2").val(data.desc);
		        	//上传时回显图片
		        	$("#deli").show();
		        	$("#flowChartDiv").html("<img src='${pageContext.request.contextPath}/"+data.desc+"' style='width:200px; height:200px;'></img>");
		        	//$.messager.alert("提示","图片上传成功！"); 
				}else if(data.b==false){
		        	$.messager.alert("提示",data.desc); 
				}
	        },  
	        error : function(data){ 
	        	$.messager.alert("提示",data.error);
	        }  
	    });
	}
}   
</script>

后台代码：

1：自定义文件大小判断，文件格式判断。（因为前端页面显示时无法显示小写后缀，所以将后缀全部改为大写格式）:

2：返回的值由自己控制，传文件名或者路径都可以。

	@RequestMapping(value="/insertImg",method=RequestMethod.POST,produces="text/html;charset=UTF-8")
	@ResponseBody 
	public String insertImg(String id,MultipartFile file, HttpServletRequest request) throws Exception, IOException{
		//定义图片的大小不能超过2M
	    long maxSize = 1024*1024*2;	
	    //判断文件大小
        long fileSize = file.getSize();
        if(fileSize > maxSize) {
        	return JsonString.returnJsonFalse("图片大小不能超过2M,请确认大小后重新上传!");
        }else {
    		//获取文件存贮的路径
    		ServletContext context = request.getSession().getServletContext();
    		//设定指定存储文件的位置
    		String newPath = context.getRealPath("/images");
    		//获取文件的原始名称
    		String fileName = file.getOriginalFilename();

    		//获得文件后缀， 将后缀名改为大写
            int i = fileName.lastIndexOf(".");
            String tt = fileName.substring(i+1).toUpperCase();
            System.out.println(tt);
            //判断是否是图片格式
            if(!tt.equals("PNG") && !tt.equals("JPG") && !tt.equals("BMP") && !tt.equals("JPEG") && !tt.equals("GIF")) {
            	return JsonString.returnJsonFalse("上传图片格式不正确,请确认上传文件是否是图片格式！");
            }
            
            //获得新的文件名
    		String newFileName = DateUtils.getCurrentDate()+"."+tt;
    		
    		String sqlPath = "images/"+newFileName;
    		//保存路径到数据库中(通过业务类型id)
    		businessGuideMapper.updateFlowChartById(sqlPath,id);
            File dir = new File(newPath,newFileName);          
            if(!dir.exists()){  
                dir.mkdirs();  
            }  
            //MultipartFile自带的解析方法  
            file.transferTo(dir);  
            //返回插入图片的相对路径，并保存到另外一个form表单中
            return JsonString.returnJsonTrue(sqlPath);
        }
	}