SpringMVC异步上传图片总结

SpingMVC上传图片文件

需求：在页面上创建一个图片框，点击图片框之后弹出文件选择框，选择完之后图片马上显示在页面上预览。之后点击上传之后判断选择的是不是图片文件，如若是将图片上传保存在规定的路径上实现无刷新上传。

前提：完成的SpringMVC环境搭建

1.首先介绍jsp

添加一个图片框里面默认一张图片、表单、文件框、按钮

 <img id="imghead" border="0" src="images/sfzzm.png" width="150" height="100" onClick="$('#previewImg').click();">

 <form  id="zmForm" method="post"  enctype="multipart/form-data">        <input type="file" onChange="previewImage(this)" style="display: none;" id="previewImg" name="piczm">    </form>
 <button type="button" class="btn" id="btnzm" >上传</button>

编写js让选完图片之后马上又预览效果

<script>      //图片上传预览    IE是用了滤镜。        function previewImage(file)        {          var MAXWIDTH  = 150;           var MAXHEIGHT = 100;          var div = document.getElementById('preview');          if (file.files && file.files[0])          {              div.innerHTML ='<img id=imghead width=150 height=100 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;        }    </script>

编写按钮的点击事件

<script type="text/javascript"> $("#btnzm").click(function(){   var zmfilename=$("#previewImg").val();   if(zmfilename==""){      alert("请先点击图片框选择文件！");      return ;   }      //判断是不是图片的格式   var mime = zmfilename.toLowerCase().substr(zmfilename.lastIndexOf("."));     if(mime!=".jpg"&&mime!=".png") { alert("请选择jpg、png格式的照片上传"); return;}   var options = {                  // 规定把请求发送到那个URL                   url: '<%=basePath%>upload',                  // 请求方式                  type: "post",                  // 服务器响应的数据类型                  dataType: "text",                  // 请求成功时执行的回调函数                              success: function(data, status, xhr) {                                         alert(data);                },                error:function(){                alert("上传图片出错了");                }        };        $('#zmForm').ajaxSubmit(options);       //$('#zmForm').ajaxForm(options).sumbit(function(){return false;});       });  </script> 

2.需要配置springmvc-servlet.xml(根据具体自己具体的项目为准)

<!-- 需要文件上传功能时，启用以下配置 -->   <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">    <property name="maxInMemorySize">        <value>1638400</value>    </property>   </bean>

3.Conterller层

@RequestMapping("/upload")public void upload(MultipartFile piczm,HttpServletRequest request,HttpServletResponse response,HttpSession session ) throws IOException, ServletException {//获取图片的原始文件名String originalFilename=piczm.getOriginalFilename();System.out.println("原始文件名为:"+originalFilename);//获取文件扩展名int index=originalFilename.indexOf(".");//设置文件新的名称String name="abc"+originalFilename.substring(index, originalFilename.length());System.out.println("新文件名为："+name);//设置文件存储路径String path ="d:\\abc\\"+new SimpleDateFormat ("yyyyMMdd").format(new Date())+"\\"+name;System.out.println("文件存储的路径为："+path);File dir=new File(path);if(!dir.exists()){dir.mkdirs();}//上传图片信息piczm.transferTo(new File(path));//返回成功信息response.setContentType("application/text;charset=utf-8");response.getWriter().write("图片上传成功");}

到自己规定的路径下查找文件。