Spring MVC在maven下用$ajaxFileUpload()上传图片

向右看齐 2021-09-26 06:46 163阅读 0赞

工作准备

  1. jsp:需要导入jquery.min.jsajaxfileupload.js
  2. 后台:在speingapplicationContext.xml配置文件中加入
  3. <!-- 配置MultipartResolver 用于文件上传 使用springCommosMultipartResolver -->
  4. <beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" p:defaultEncoding="UTF-8" p:maxUploadSize="5400000" p:uploadTempDir="fileUpload/temp" >
  5. </beans:bean>

要是没有相应的jar包,就在pom.xml中配置一下。
因为重点是文件上传,页面就简介的来了。

代码

test.jsp

  1. <%-- Created by IntelliJ IDEA. User: qqg Date: 2017/8/10 Time: 14:53 To change this template use File | Settings | File Templates. --%>
  2. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
  3. <% String path = request.getContextPath(); HttpSession s = request.getSession(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
  4. <html>
  5. <head>
  6. <script type="text/javascript" src="/js/jquery.min.js"></script>
  7. <script type="text/javascript" src="/js/ajaxfileupload.js"></script>
  8. <title>Title</title>
  9. </head>
  10. <body>
  11. <form action="/editImage" method="post" enctype="multipart/form-data" >
  12. <div> 图片显示
  13. <img src="" id="img_box_update" style="height: 200px;width: 350px;"/>
  14. </div>
  15. <hr>
  16. <br>
  17. <input type="file" name="file" class="form-control" id="file_update" >
  18. <br>
  19. <hr>
  20. <div>
  21. 上传后得到的url:
  22. <input type="text" name="avatar" class="form-control" id="input_update_avatar" style="width: 700px;">
  23. </div>
  24. </form>
  25. <input type="submit" id="img_update" value="上传图片"/>
  26. </body>
  27. <script> $("#img_update").click(function () { $.ajaxFileUpload({ //处理文件上传操作的服务器端地址 url:'/editImage', secureuri:false, //是否启用安全提交,默认为false fileElementId:'file_update', //文件选择框的id属性 type:"POST", dataType:'text', //服务器返回的格式,可以是json或xml等 success:function(result){ //服务器响应成功时的处理函数 console.log(result); //alert(result); // img.appendTo("#img_box"); $("#input_update_avatar").val(result); $("#img_box_update").prop("src",result); }, error:function(data, status, e){ //服务器响应失败时的处理函数 //$('#result').html("<font color=\"red\"> 图片上传失败,请重试!!</font><br/>"); } }); }); </script>
  28. </html>

控制器TestController.java

  1. package com.hand.controller;
  2. import com.hand.util.FileUpload;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.web.bind.annotation.RequestMapping;
  5. import org.springframework.web.bind.annotation.RequestParam;
  6. import org.springframework.web.bind.annotation.ResponseBody;
  7. import org.springframework.web.multipart.commons.CommonsMultipartFile;
  8. import javax.servlet.http.HttpServletRequest;
  9. import java.io.IOException;
  10. /** * Created by qqg on 2017/8/14. */
  11. @Controller
  12. public class TestController {
  13. @ResponseBody
  14. @RequestMapping(value="/editImage")
  15. public String editTbReportImage(@RequestParam("file") final CommonsMultipartFile file
  16. ,HttpServletRequest request) {
  17. String filePath = null;
  18. //System.out.println("root path:"+request.getContextPath());
  19. if (!file.isEmpty()) {
  20. try {
  21. filePath = FileUpload.uploadFile(file,request);
  22. } catch (IOException e) {
  23. e.printStackTrace();
  24. }
  25. }
  26. System.out.println("filePath"+filePath);
  27. return filePath;
  28. }
  29. }

文件上传工具类FileUpload.java

  1. package com.hand.util;
  2. //import org.apache.commons.io.FileUtils;
  3. import org.springframework.web.multipart.MultipartFile;
  4. import javax.servlet.http.HttpServletRequest;
  5. import java.io.File;
  6. import java.io.IOException;
  7. import java.util.Date;
  8. /** * Created by qqg on 2017/8/12. */
  9. public class FileUpload {
  10. public static final String FILE_PATH = "/images/upload/";
  11. //文件上传
  12. public static String uploadFile(MultipartFile file, HttpServletRequest request) throws IOException {
  13. //项目对应服务器的根目录,用这个方法都可以获取
  14. String s = request.getSession().getServletContext().getRealPath("/");
  15. //测试的,在服务器的根目录下创建个文件测试一下
  16. System.out.println("5:"+ s);
  17. File file_root = new File(s+"/images/HelloWorld.txt");
  18. if(!file_root.exists()){
  19. try {
  20. file_root.createNewFile();
  21. } catch (IOException e) {
  22. e.printStackTrace();
  23. }
  24. }
  25. System.out.println("file_text path is:"+file_root.getAbsolutePath());
  26. String file_root_img = s + FILE_PATH;
  27. String fileName = file.getOriginalFilename();
  28. String file_last = new Date().getTime() + String.valueOf(fileName);
  29. File tempFile = new File(file_root_img, file_last);
  30. if (!tempFile.getParentFile().exists()) {
  31. tempFile.getParentFile().mkdir();
  32. }
  33. if (!tempFile.exists()) {
  34. tempFile.createNewFile();
  35. }
  36. file.transferTo(tempFile);
  37. //输出绝对地址看看
  38. System.out.println(tempFile.getAbsolutePath());
  39. //返回的不能是绝对地址,只能返回相对于服务器的地址,因为jsp图片显示的时候会在图片前面自动的加上 http://localhost:8080/ProjectName,这里返回后面的一段就好,到时候jsp页面会自己拼接完整的url
  40. return FILE_PATH + file_last;
  41. }
  42. public static File getFile(String fileName) {
  43. return new File(FILE_PATH, fileName);
  44. }
  45. }

注意事项:

  1. 1.jsp页面中的

<input type="file" name="file" class="form-control" id="file_update" >其中的id对应$ajaxFileUpload();方法中的
fileElementId:’file_update’, 的值,俩个的值要一样。

  1. 2.有什么不对的地方看看注释。

界面截图

这里写图片描述
这里写图片描述

总结:

  1. 图片上传不难,难点在于路径。我们上传不能上传到web项目中,而是要上传到web项目发布的服务器中,然后在数据库中保存相对于服务器的相对地址即可。还有,要是想用$ajax();这个方法上传图片的话,要将文件Formdate,才能上传。

发表评论

表情:
评论列表 (有 0 条评论,163人围观)

还没有评论,来说两句吧...

相关阅读