.导入jar包

  1. commons-fileupload.jar
  2. commons-io-1.3.2.jar

跨服务器使用的jar

  1. jersey-client-1.18.1.jar
  2. jersey-core-1.18.1.jar

需要使用的js

文件上传页面addUser.jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script> <!-- jQuery -->
  9. <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.form.js"></script> <!-- 文件上传的js文件 -->
  10. </head>
  11. <body>
  12.     <form id="fm" action="${pageContext.request.contextPath}/user/addUser.do" method="post" >
  13.         <p>用户名：<input name="userCode"/></p>
  14.         <p>姓名：<input name="userName"/></p>
  15.         <p>密码：<input name="userPassword" type="password"/></p>
  16.         <p>性别：<input type="radio" name="gender" value="1" />男
  17.         <input type="radio" name="gender" value="2" checked/>女</p>
  18.         <p>
  19.             请上传头像：
  20.             <img id=\'imgSrc\' src=\'\' alt=""  height="100" width="100"/>
  21.             <input type="file" id=\'imgFile\' name=\'imgFile\' onchange="fileShow();"/>
  22.             <input id="relativeSrc" type="hidden" name="filepath"/><!-- 绝对路径提交到数据库 -->
  23.             <br/>
  24.         </p>
  25.         <p><input type="submit" value="添加"/></p>
  26.     </form>
  27.     
  28.     <script type="text/javascript">
  29.         function fileShow(){
  30.             //请求ajax   将图片上传到文件服务器
  31.             $("#fm").ajaxSubmit({
  32.                 type:"POST",
  33.                 url:"${pageContext.request.contextPath}/upload/uploadImage.do",   //提交至controller处理,将图片保存并实时显示
  34.                 data:{
  35.                     fileName:"imgFile"
  36.                 },
  37.                 success:function(resData){
  38.                     $("#imgSrc").attr("src",resData.fullPath);
  39.                     $("#relativeSrc").val(resData.relativePath);
  40.                 },
  41.                 dataType:"json"
  42.             });
  43.         }
  44.     </script>    
  45. </body>
  46. </html>

cn.bdqn.controller.UploadController.java

  1. package cn.bdqn.controller;
  2. /**
  3.  * ajax文件上传并实时显示
  4.  */
  5. import java.text.SimpleDateFormat;
  6. import java.util.Date;
  7. import java.util.HashMap;
  8. import java.util.Map;
  9. import java.util.Random;
  11. import javax.servlet.http.HttpServletRequest;
  13. import org.springframework.stereotype.Controller;
  14. import org.springframework.web.bind.annotation.RequestMapping;
  15. import org.springframework.web.bind.annotation.ResponseBody;
  16. import org.springframework.web.multipart.MultipartHttpServletRequest;
  17. import org.springframework.web.multipart.commons.CommonsMultipartFile;
  19. import com.sun.jersey.api.client.Client;
  20. import com.sun.jersey.api.client.WebResource;
  22. @Controller
  23. @RequestMapping("/upload")
  24. public class UploadController {
  25.     @RequestMapping("uploadImage")
  26.     //@responseBody把后台pojo转换json对象，返回到页面
  27.     public @ResponseBody Map<String,String> uploadImage(HttpServletRequest request,String fileName){
  28.         MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;  //将普通请求转换为多部件请求方式
  29.         CommonsMultipartFile mf = (CommonsMultipartFile) mr.getFile(fileName);  //根据文件名进行获取文件对象
  30.         byte[] fileBytes = mf.getBytes();  //将文件对象转换为字节
  31.         /**
  32.          * 获取文件名
  33.          */
  34.         String newFileName = "";
  35.         SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS"); //获取当前时间作为文件名的前半部分
  36.         newFileName = sdf.format(new Date());
  37.         //取三位数的随机数 作为文件名的后半部分
  38.         Random rd = new Random();
  39.         for(int i=0;i<3;i++){
  40.             newFileName = newFileName + rd.nextInt(10);
  41.         }
  42.         System.out.println("随机的文件名为："+newFileName);
  43.         //获取文件全名称
  44.         String originalFilename = mf.getOriginalFilename();
  45.         System.out.println("文件全名称:"+originalFilename);
  46.         //获取后缀
  47.         String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
  48.         System.out.println("上传文件的后缀："+suffix);
  49.         /**
  50.          * 开始上传
  51.          */
  52.         Client client = Client.create();  //创建jesy服务器，进行跨服务器上传
  53.         //绝对路径
  54.         String fullPath = "http://127.0.0.1:8001/fileproj/upload/"+newFileName+suffix;
  55.         WebResource wr = client.resource(fullPath);
  56.         //相对路径
  57.         String relativePath = "/upload/"+newFileName+suffix;
  58.         //上传
  59.         wr.put(String.class, fileBytes); //将文件对象的字节码上传
  60.         
  61.         Map<String,String> map = new HashMap<String, String>();
  62.         map.put("fullPath", fullPath); //将绝对路径存入map集合
  63.         map.put("relativePath", relativePath);  //将相对路径存入map集合
  64.         return map;
  65.     }
  66. }

在文件服务器中创建一个文件夹存放本项目需要上传的图片。多项目之前可以使用不同文件夹存放。

将两个服务器打开

 

 

版权声明：本文为wxbblogs原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wxbblogs/p/7306878.html