图片上传不保存并在页面显示出来

张图片上传步骤

1、jsp页面

[html]  view plain  copy

1. <form action="yst/saveImgPreview.action"  
2.                    enctype="multipart/form-data" method="post"  
3.                    class="form-horizontal" name="saveImg_form" id="saveImg_form">  
4.                 <div class="control-group">  
5.                 <label class="control-label">图片地址</label><br> <br> <br>  
6.                 <div class="controls">  
7.                      <div id="preview" class="controls">  
8.                         <img id="imghead" border="0" onclick="$('#previewImg').click();">  
9.                      </div>  
10.                      <div class="col-md-6">  
11.                     <input id="previewImg" type="file"  onchange="previewImage(this)" name="previewImg"  
12.                             data-show-upload="false">  
13.                     </div>  
14.                 </div>  
15.                 </div>  
16.    
17.             </form>  

2、js页面

[javascript]  view plain  copy

1. //图片上传预览    IE是用了滤镜。  
2.        function previewImage(file)  
3.        {  
4.          var MAXWIDTH  = 90;  
5.          var MAXHEIGHT = 90;  
6.          //获得  
7.          var div = document.getElementById('preview');  
8.          if (file.files && file.files[0])  
9.          {  
10.              console.log(file.files[0]+"图片路径====");  
11.              div.innerHTML ='<img id=imghead οnclick=$("#previewImg").click()>';  
12.              var img = document.getElementById('imghead');  
13.              img.onload = function(){  
14.                //获得图片大小及对其方式  
15.                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);  
16.                img.width  =  rect.width;  
17.                img.height =  rect.height;  
18. /                 img.style.marginLeft = rect.left+'px';  
19.                img.style.marginTop = rect.top+'px';  
20.              }  
21.              var reader = new FileReader();  
22.              reader.onload = function(evt){img.src = evt.target.result;}  
23.              reader.readAsDataURL(file.files[0]);  
24.          }  
25.          else //兼容IE  
26.          {  
27.            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';  
28.            file.select();  
29.            var src = document.selection.createRange().text;  
30.            div.innerHTML = '<img id=imghead>';  
31.            var img = document.getElementById('imghead');  
32.            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;  
33.            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);  
34.            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);  
35.            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";  
36.          }  
37.        }  
38.        function clacImgZoomParam( maxWidth, maxHeight, width, height ){  
39.            var param = {top:0, left:0, width:width, height:height};  
40.            if( width>maxWidth || height>maxHeight ){  
41.                rateWidth = width / maxWidth;  
42.                rateHeight = height / maxHeight;  
43.                  
44.                if( rateWidth > rateHeight ){  
45.                    param.width =  maxWidth;  
46.                    param.height = Math.round(height / rateWidth);  
47.                }else{  
48.                    param.width = Math.round(width / rateHeight);  
49.                    param.height = maxHeight;  
50.                }  
51.            }  
52.            param.left = Math.round((maxWidth - param.width) / 2);  
53.            param.top = Math.round((maxHeight - param.height) / 2);  
54.            return param;  
55.        }  

3.controller 代码

[java]  view plain  copy

1. @RequestMapping(value="/saveCompant",method=RequestMethod.POST)  
2.     public String saveCompany(Family family,@RequestParam("previewImg") MultipartFile file,HttpServletRequest request) throws IOException{  
3.         // 上传图片  
4.                 String imgUrl = "";  
5.                 if (file != null && !file.isEmpty()) {  
6.                     String url = "D:/" + "upload/";  
7.                     //file.getOriginalFilename();图片文件名  
8.                     String fileName = System.currentTimeMillis()+file.getOriginalFilename();  
9.                     String fileType = fileName.substring(fileName.lastIndexOf(".") + 1);  
10.                     fileType = fileType.toLowerCase();  
11.                     FileUtils.copyInputStreamToFile(file.getInputStream(), new File(url, fileName));  
12.                     imgUrl = fileName;  
13.                 }  
14.       //保存信息  
15.   
16.         return "redirect:compant_actList.action?type="+family.getType();  
17.     }