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

张图片上传步骤

1、jsp页面

 <form action="yst/saveImgPreview.action"
                    enctype="multipart/form-data" method="post"
                    class="form-horizontal" name="saveImg_form" id="saveImg_form">
                 <div class="control-group">
                 <label class="control-label">图片地址label><br> <br> <br>
                 <div class="controls">
                      <div id="preview" class="controls">
                         <img id="imghead" border="0" onclick="$('#previewImg').click();">
                      div>
                      <div class="col-md-6">
                     <input id="previewImg" type="file"  onchange="previewImage(this)" name="previewImg"
                             data-show-upload="false">
                     div>
                 div>
                 div>

             form>

2、js页面

 //图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
          var MAXWIDTH  = 90;
          var MAXHEIGHT = 90;
          //获得
          var div = document.getElementById('preview');
          if (file.files && file.files[0])
          {
              console.log(file.files[0]+"图片路径====");
              div.innerHTML ='';
              var img = document.getElementById('imghead');
              img.onload = function(){
                //获得图片大小及对其方式
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
 /                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
              }
              var reader = new FileReader();
              reader.onload = function(evt){img.src = evt.target.result;}
              reader.readAsDataURL(file.files[0]);
          }
          else //兼容IE
          {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'>

";  

         }  

       }  

       function clacImgZoomParam( maxWidth, maxHeight, width, height ){  

           var param = {top:0, left:0, width:width, height:height};  

           if( width>maxWidth || height>maxHeight ){  

               rateWidth = width / maxWidth;  

               rateHeight = height / maxHeight;  

                 

               if( rateWidth > rateHeight ){  

                   param.width =  maxWidth;  

                   param.height = Math.round(height / rateWidth);  

               }else{  

                   param.width = Math.round(width / rateHeight);  

                   param.height = maxHeight;  

               }  

           }  

           param.left = Math.round((maxWidth - param.width) / 2);  

           param.top = Math.round((maxHeight - param.height) / 2);  

           return param;  

       }  

3.controller 代码

 @RequestMapping(value="/saveCompant",method=RequestMethod.POST)
     public String saveCompany(Family family,@RequestParam("previewImg") MultipartFile file,HttpServletRequest request) throws IOException{
         // 上传图片
                 String imgUrl = "";
                 if (file != null && !file.isEmpty()) {
                     String url = "D:/" + "upload/";
                     //file.getOriginalFilename();图片文件名
                     String fileName = System.currentTimeMillis()+file.getOriginalFilename();
                     String fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
                     fileType = fileType.toLowerCase();
                     FileUtils.copyInputStreamToFile(file.getInputStream(), new File(url, fileName));
                     imgUrl = fileName;
                 }
       //保存信息

         return "redirect:compant_actList.action?type="+family.getType();
     }