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

张图片上传步骤

1、jsp页面

[html] view
plain copy

<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页面

[javascript] view
plain copy

//图片上传预览    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 onclick=$("#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 代码

[java] view
plain copy

@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();  

    }