layui+SSM的图片存取记录

我的思路是用layui的upload模块进行上传，然后保存在服务端并返回我的存储的路径path，若用户此时要删除图片，可以直接点击图片删除，然后后台马上从服务器端删除。(这一部分，我打算后期是不是可以用缓存来替代，而不是硬盘的直接读写)

然后就是用户确认上传图片，那么我直接把图片的path提交到后台，存入数据库！

---

废话不多说 ，直接上关于图片部分的代码，需要的自取！↓

---

1.前端HTML部分(这里只放图片的部分,layui的多图片demo)

<div class="layui-upload">
	<button type="button" class="layui-btn" id="test2">多图片上传</button> 
		 <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
	    	预览图：
	  	  <div class="layui-upload-list" id="demo2"></div>
	 	</blockquote>
</div>

2. 前端js部分(layui部分)

/*   
 *    delpic方法是执行用户删除图片操作
 */
function delpic(obj){
				var picurl = obj.firstChild.firstChild.value;
				console.log(picurl)
				layui.use(['layer'],function(){					
					layer.confirm('确定删除图片吗?', {icon: 2, title:'删除'}, function(index){
						 $.ajax({
							url:"/weibao/product/delImg",
							type:"post",
							async:false,
							data:{"picurl":picurl},
							success:function(res){
								if(res=="success"){
									obj.remove();
								 	console.log("删除图片成功！")
								 	layer.msg("删除成功！！！",{icon:1 ,time:700})
								 	layer.close(index);
								}else{
									layer.msg("删除失败！！！",{icon:5,time:700})
								}
								
							},
							error:function(error){
								layer.msg("系统错误！！！",{icon:5,time:700})
								console.log(error)
							}
						}) 
						  
						});
				})
			}
			
	layui.use(['form', 'layer', 'jquery','upload'], function() {
					var $ = layui.jquery;
					var form = layui.form,
						layer = layui.layer,
						upload = layui.upload;
					var count =0;
	upload.render({
					    elem: '#test2'
					    ,url: '/weibao/product/uploadImg' //改成您自己的上传接口，我对应的是uploadImg
					    ,multiple: true
						,size:5120
					    ,before: function(obj){
					      //预读本地文件
					      obj.preview(function(index, file, result){
					    	  var id = file.name.split(".")[0];
					        $('#demo2').append('<a href=\'javascript:(0)\' onclick=\'delpic(this)\'><img id="'+id+'" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width:100px;height:100px" name="file"></a>')
					      });
					    }
						,allDone: function(obj){ //当文件全部被提交后，才触发
					        console.log(obj.total); //得到总文件数
					        console.log(obj.successful); //请求成功的文件数
					        console.log(obj.aborted); //请求失败的文件数
						}
					    ,done: function(res){
					    	console.log("服务器传来的信息：",res)
					    	console.log(res.msg)
					    	var id="#"+res.filename.split(".")[0]
					    	//加入一个隐藏的input，存图片在服务器端的url，便于在表单提交的时候用到！
					    	$(id).append('<input type="hidden" name="pic'+count+'" value="'+res.url+'"/>')
					    	count++;
					    }
					  });
				  })

3.Controller部分(上传操作)

/*
*删除图片操作
*/
@RequestMapping("delImg")
	@ResponseBody
	public String delImg(String picurl) {
		boolean flag= file.deleteFile(picurl);
		if(flag) {
			return "success";
		}
		return "failed";
	}

/**
	 * 删除文件操作，传入文件的路径即可删除
	 * @param pathname
	 * @return
	 */
	 
	public static boolean deleteFile(String pathname){
		boolean result = false;
		File file = new File(pathname);
		if (file.exists()) {
			file.delete();
			result = true;
			System.err.println("文件已经被成功删除");
		}
		return result;
	}

/*
*上传图片操作
*/
@RequestMapping("uploadImg")
	@ResponseBody
	public void uploadImg(@RequestParam MultipartFile file, ModelMap model,HttpServletResponse response) {
		try {
			if (!file.isEmpty()) {
				String originalFilename = file.getOriginalFilename();
				long size = file.getSize();
				System.err.println("上传文件名为" + originalFilename + ",上传大小为" + size);
				// uuid是机器码，是唯一的
				String uuid = UUID.randomUUID().toString();
				// 获取后缀名
				int lastIndexOf = originalFilename.lastIndexOf(".");
				String substring = originalFilename.substring(lastIndexOf);
				// 设置保存路径
				String filenames = "\uploadImg\\"
						 + uuid + substring;
				File files = new File(filenames);
				FileOutputStream fos = new FileOutputStream(filenames);
				IOUtils.copy(file.getInputStream(), fos);
				//设置标准的layui的返回格式
				model.put("code", 200);
				model.put("msg", "success");
				model.put("url", filenames);
				model.put("filename", originalFilename);
			} else {
				model.put("msg", "No File");
				model.put("code", 0);
			}
		} catch (Exception e) {
			model.put("msg", "error");
			model.put("code", 0);
			e.printStackTrace();
		}finally {
			renderData.render_Data(response, model);
		}
	}


/**
	 * 通过PrintWriter将响应数据写入response,ajax可以接受到这个数据
	 * 
	 * @param response
	 * @param data
	 */
	public static void render_Data(HttpServletResponse response, ModelMap model) {
		PrintWriter printWriter = null;
		String jsonResult = JSON.toJSONString(model);
		response.setContentType("text/html;charset=UTF-8");
		try {
			printWriter = response.getWriter();
			printWriter.print(jsonResult);
		} catch (IOException ex) {
		} finally {
			if (null != printWriter) {
				printWriter.flush();
				printWriter.close();
			}
		}
	}