利用ajax与springmvc传送formdata实现图片的无刷新上传

来源：互联网发布：开源cms投资编辑：程序博客网时间：2024/05/29 03:39

<div style="margin-top:10px;margin-left:20px">
     <--这是图片点击就上传-->
    <img type="button" id="button_identityA" src="<%=request.getContextPath() %>/resources/static/images/a.png" alt="" name="img_identityA"/>
     </div>

     <div style=" width:150px;height:150px; margin-left:350px" >
      <--这是上传图片的位置-->
      <img path="img" id="img_identityA" src="" alt="" name="aaa"/>

java 中的control

/**
         * 存放上传的图片信息
         */
        private static Map<String,byte[]> images;

         static {
                 images = new HashMap<String, byte[]>();
            }

1、图片上传

  @RequestMapping(value = "upload", method = RequestMethod.POST)
      public String upLoad(HttpServletRequest request,HttpServletResponse response,HttpSession session) {
             // 从请求中获取到文件信息需要将请求转换为MultipartHttpServletRequest类型
              MultipartHttpServletRequest MulRequest = request instanceof MultipartHttpServletRequest ? (MultipartHttpServletRequest) request : null;

              System.out.println("怎么回事");
              Iterator<String> fileNames = MulRequest.getFileNames();
              if (fileNames.hasNext()) { // 遍历请求中的图片信息
                  String fileName = fileNames.next(); // 图片对应的参数名

                  MultipartFile    file = MulRequest.getFile(fileName); // 获取到图片
                  if (file != null) {

                      try {

                      byte[] data=file.getBytes();// 可以获取到图片的字节数组
           images.put(fileName,file.getBytes());// 获取到图片以字节数组形式保存在服务器内存中

           SimpleDateFormat sdf = new SimpleDateFormat("ddHHmmss");
            Login lo =(Login)session.getAttribute("loginUser");

            String userid=lo.getUserID();

           String pictime =sdf.format(new Date());
           session.setAttribute("pictime", pictime);

           FileOutputStream fileOutputStream=new FileOutputStream("D:\\"+userid+pictime+".jpg");


           fileOutputStream.write(data);


          } catch (IOException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
          }

                      return null ;
                  }

              }
          return null ;
         }

2、图片显示
Ajax请求发送成功之后的方法中的操作，
$("#img_identityA").attr("src","userregeste/file/showImages.do？name=identityA&"+new Date().toTimeString());
值得一提的是，img标签中的src属性，对于UI人员来说就是存放静态图片资源的，但是对于程序员来说，应该要知道img标签实际上会根据src属性去发送一次请求。同时，浏览器对于img的src属性的处理方式是如果src属性值不变，只会发送一次请求，所有加上new Date().toTimeString()，使每次的请求都不相同。
        @RequestMapping(value = "showImages")
        public String showImages(HttpServletRequest request,HttpServletResponse response) throws IOException {

           OutputStream sout = null;

           String name = request.getParameter("name"); // 图片名称


          byte[] pictrue = null;
          // 从本地Map中去获取images图片
           pictrue = images.get(name);

           try {
                if (pictrue != null) {
                    response.setContentType("text/html");
                   sout = response.getOutputStream();
                   sout.write(pictrue);
                 sout.flush();
                    sout.close();
                  sout = null;
               } else {
                    return null;
                }
           } catch (Exception e) {
               e.printStackTrace();
           } finally {
               if (sout != null) {
                  sout.close();
                   sout = null;
               }
           }
           return null;
        }

*需要的jar包除了SpringMVC的所有jar包之外，还需要
commons-fileupload-1.3.1.jar
commons-io.jar
*设置enctype="multipart/form-data"后，表单数据是以二进制形式进行传输的，commons-fileupload-1.3.1.jar 即是帮我们解析二进制数据并且封装到parameter里面，不添加这个包，从HttpServletRequest获取不到参数，可以获取二进制流数据自行解析。
*以上的实现动态的将图片传送到后台，可以在后台对图片进行一系列处理，效率比较高

spring配置

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="1024000"></property>
</bean>

如果是pom.xml的话

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>

0 0