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

单张图片上传步骤

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" οnclick="$('#previewImg').click();">
                     </div>
                     <div class="col-md-6">
                    <input id="previewImg" type="file"  οnchange="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 ='<img id=imghead οnclick=$("#previewImg").click()>';
              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 = '<img id=imghead>';
            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 = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
          }
        }
        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();
    }

     可以调试了。。。end。。。。