SSM完成图片的上传并且实现上传的图片可以正确显示，文件和项目同级目录下的访问方法

需求：通过前台选择图片，上传到服务器后，文件的路径保存数据库，下次访问根据数据库路径能正确显示。
先从数据库开始：
基本需要包含以下的字段：name(文件名)，path（路径），设置为varchar类型就可以。
然后就是至少实现该文件数据表的增加和查询，删除修改实现最好，这些基础功能在这里就不在赘述。接下来开始：

表单设计

<form  id="fom" enctype="multipart/form-data" style="margin-bottom:20px;">
      <div class="tab-pane active" id="">
            <div class="row data-type">
                   <div class="col-md-2 title">特产名称</div>
                   <div class="col-md-4 data">
                       <input type="text" id="pname" name="pname" class="form-control" placeholder="名称">
                   </div>              
                   <div class="col-md-2 title">图片上传</div>
                   <div class="col-md-10 data">
                       <a href="javascript:;" class="a-upload">
					    <input type="file" name="file" id="file">点击这里上传文件
					   </a>
                   </div>                  
	       </div>
	   </div>
	   </form>

注意几个点：
1、表单的要加enctype=“multipart/form-data”
2、上传文件的input，该属性一定要设置为type=“file”
当然这里肯定是可以在表单中添加一个type="submit"的input标签，然后在fom表单上添加action用于表单的提交，但是这样一种方法，在表单提交后会进行页面跳转，所以这里的话采用ajax实现，表单提交后的业务设计。

function submit(){
	/*这里可以添加一些表单提交前的验证*/
	var formData = new FormData($("#fom")[0]);
	$.ajax({
	         url: root+'/uploadFile.action',
	         type: 'POST',    //必须是post
	         cache: false,   //必须
	         async: false,   //同步（不是必须）
	         data: formData,  //这里就不能采用#（"#fom"）.seri……这种方式了，不太记得怎么写了
	         processData: false,   //上传必须
	         contentType: false,   //上传必须
	         success:function(result){
	        	/*这里可以处理上传成功之后的操作*/
	        }
	});
}

后端代码

@RequestMapping("/uploadFile")
	public void upload(@RequestParam("file") MultipartFile file,HttpServletRequest request,HttpServletResponse response,Product product) {
		String savePath = "";
        String filename = "";
        int flg = 0;
		if(null != file && StringUtils.isNoneEmpty(file.getOriginalFilename())) {
			 savePath = "/upload/file/";
			// 获取上传文件的原始名称
			String originalFilename = file.getOriginalFilename();
			//获取项目部署目录根 （此处为tomcat下的webapps目录路径如 D:\apache-tomcat-7.0.92\webapps，避免项目重新部署后上传的文件被清除丢失）
			File rootPath = new File(request.getServletContext().getRealPath("/")).getParentFile();
			File uploadFile = new File(rootPath.getPath()+savePath); 
			// 如果保存文件的地址不存在，就先创建目录
			if (!uploadFile.exists()) {
				uploadFile.mkdirs();
			}
			filename = UUID.randomUUID() + "_"+originalFilename;
			String url=rootPath.getPath()+"/upload/file/"+filename;
			//保存路径到数据库
			product.setPimage(filename);
            product.setIndexImg(savePath + filename);
            flg = productService.insert(product);
			try {
				// 使用MultipartFile接口的方法完成文件上传到指定位置
				file.transferTo(new File(url));
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		if(flg==1) {
			JsonUtil out = new JsonUtil(request,response);
			out.outObjString(product);
		}
		
	}

注意:@RequestParam(“file”)这里" "里面的内容要和表单的file那个表单统一
然后你就可以看到在你的tomcat的项目部署目录中看到根据路径创建的文件夹，因为这里采用的是将文件保存到项目的同级目录下，具体为什么不放在项目里面的某个目录下是因为部署项目会将前一次部署的清除，之前上传的图片就会被覆盖掉，导致回显不了。所以这里采用项目同级目录下的一个位置保存图片
就像这样：

ajax访问数据库获取路径图片回显

这个在jsp上面获取
String projectPath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() ;
js:

$.ajax({
		type : "get",
		url : root+"/getProductByCate.action?cid="+id,
		async : false,
		success : function(result) {
			var page = result.data;
			var destlist = eval(page);
			var htm = '';
			for (var i = 0; i < destlist.length; i++) {  	
            	var obj = destlist[i];
        		htm = htm +
        			 '<tr>' +
           	         '<td class="text-center"><img src="'+encodeURI(projectPath  + obj.indexImg)+'"/  style="width:20%;height: 
	                 '</td>'
           	         '</tr>';
        		/*$("#testimg").append('<img  src="' + encodeURI(projectName + obj.indexImg) + '" style="width:20%;height: 200px;margin-right:10px"/>');*/
            }
			
			$("#porductlist").html('');
            $("#porductlist").html(htm);
            goPage(1,6);     //调用分页函数，实现分页 
		}

比如你的项目访问路径是
localhost:8080/test
然后图片的访问路径就要到项目路径的上一层
localhost:8080 + /upload/file/aaa.jpg（后台代码设置的路径）
注意：
然后访问时可能会出现一个问题，数据库中已经保存路径了，并且路径也已经对了，但是为什么还是访问不了，原因是项目部署路径问题。
eclipse一般会将项目部署到tomcat安装目录的wtpwebapps下面，要改成webapps路径下发布，怎么改呢？
在eclipse的server中,鼠标左键连续点击tomcat，选择Use Tomcat ……
然后改Deploy path……

接下来放一些参考的文章，侵权联系删除
SSM上传图片并保存图片地址到数据库

ssm 框架上传图片到服务器

SSM图片上传及重新部署项目图片丢失解决方案

写文章不易，如果你看到这了，不妨留个赞吧！