上传图片功能
转载：http://blog.sina.com.cn/s/blog_4c925dca0101kdar.html
上传图片页面代码：
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ taglib prefix ="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 8 <html> 9 <head> 10 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 11 <title>修改信息</title> 12 <script type="text/javascript" src="<%=basePath %>resources/skin/js/jquery-1.7.1.js"></script> 13 14 15 </head> 16 <body> 17 <div id="d1" > 18 <form action="updateSave1" method="post" enctype="multipart/form-data"> 19 头像:<img id="view" width="100" height="100"/> 20 <p>上传头像:<input type="file" name="file" id="portrait" value="上传" onchange="change();" /></p> 21 22 23 <div> 24 <input type="submit" value="确认修改" id="update1"/> 25 26 </div> 27 </form> 28 </div> 29 </body> 30 <script type="text/javascript"> 31 //该JS方法主要处理 图片显示 不涉及上传 仅仅是预览 32 function change() { 33 var pic = document.getElementById("view"); 34 var file = document.getElementById("portrait"); 35 var ext = file.value.substring(file.value.lastIndexOf(".") + 1) 36 .toLowerCase(); 37 var isIE = navigator.userAgent.match(/MSIE/) != null, isIE6 = navigator.userAgent 38 .match(/MSIE 6.0/) != null; 39 if (isIE) { 40 file.select(); 41 var reallocalpath = document.selection.createRange().text; 42 if (isIE6) { 43 pic.src = reallocalpath; 44 } else { 45 pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" 46 + reallocalpath + "\")"; 47 pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='; 48 } 49 } else { 50 var file = file.files[0]; 51 var reader = new FileReader(); 52 reader.readAsDataURL(file); 53 reader.onload = function(e) { 54 var pic = document.getElementById("view"); 55 pic.src = this.result; 56 }; 57 } 58 } 59 </script> 60 </html>
该页面主要主要在form表单上加上 enctype="multipart/form-data" 这个参数
后台页面代码：
1 @RequestMapping(value = "admin/login/updateSave1", method = RequestMethod.POST) 2 public String updateSave1(HttpSession session, HttpServletRequest request,MultipartFile file) { 3 String path = request.getSession().getServletContext().getRealPath("upload"); 4 // String fileName = file.getOriginalFilename(); 5 //创建一个图片名字 6 String fileName = new Date().getTime()+".jpg"; 7 File targetFile = new File(path, fileName); 8 //判断这个文件存不存在，如果不存在就创建 9 if(!targetFile.exists()){ 10 targetFile.mkdirs(); 11 } 12 User user = new User(); 13 //保存 14 String portrait = request.getContextPath()+"/upload/"+fileName; 15 try { 16 file.transferTo(targetFile); 17 user.setPortrait(portrait); 18 } catch (Exception e) { 19 e.printStackTrace(); 20 } 21 22 userService.updateSave(user); 23 return "admin/login/select"; 24 }
