springmvc利用jquery.form插件异步上传文件示例

时间:2022-08-22 13:59:32

需要的下载文件:

jQuery.form.js

jquery.js

commons-fileupload.jar

commons-io.jar

示例图片

springmvc利用jquery.form插件异步上传文件示例

pom.xml

?
1
2
3
4
5
6
7
8
9
10
11
<!-- 文件上传 -->
  <dependency>
   <groupId>commons-fileupload</groupId>
   <artifactId>commons-fileupload</artifactId>
   <version>1.3</version>
  </dependency>
  <dependency>
   <groupId>commons-io</groupId>
   <artifactId>commons-io</artifactId>
   <version>2.4</version>
  </dependency>

web.xml 解决上传后中文文件名乱码问题

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 解决提交时中文乱码问题 start -->
 <filter>
   <filter-name>Set Character Encoding</filter-name>
   <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
   <init-param>
    <param-name>encoding</param-name>
    <param-value>UTF-8</param-value>
   </init-param>
 </filter>
 <filter-mapping>
  <filter-name>Set Character Encoding</filter-name>
  <url-pattern>/*</url-pattern>
 </filter-mapping>
 <!-- 解决提交时中文乱码问题 end -->

servlet-context.xml中添加对上传的支持

?
1
2
3
<!-- 支持文件上传 -->
 <beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
 </beans:bean>

jsp文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path;
%>
<html lang="us">
<head>
 <meta charset="utf-8">
 <title>springmvc上传文件</title>
 <link type="text/css" href="<%=basePath%>/resources/css/jquery-ui/jquery-ui.css" rel="stylesheet" />
 <link href="<%=basePath%>/resources/themes/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 <h2>springmvc上传文件</h2>
 <br/>
 
 
<br/>
 <div class="alert alert-success" id="formSucc"></div>
 <br/>
   
 <form role="form" id="uploadForm" name="uploadForm" enctype="multipart/form-data">
  <div class="form-group">
    <label>项目名称</label>
  </div>
  <div class="form-group">
    <label>
    <input class="form-control" maxlength="30" id="projectName" name="projectName">
    </label>
  </div>
  <div class="form-group">
    <label>File input</label>
    <input type="file" name="file">
   </div>
   
  <button class="btn" type="button" id="doSave">提交</button>
   
 </form>
 <div></div>
</body>
</html>
 
 
<script type="text/javascript" src="<%=basePath%>/resources/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/resources/js/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript" src="<%=basePath%>/resources/js/jqueryForm/jquery.form.js"></script>
<script>
 
$(function(){
 $("#formSucc").hide();
  
 $("#doSave").click(function(){
  var requestUrl = "<%=basePath%>/widget/saveFile.json";
  var projectName = $("#projectName").val();
  $("#uploadForm").ajaxSubmit({
    type: 'post',
    url: requestUrl,
    //data: {projectName: projectName}, //应该把这个去掉,要不然,值会有重复,因为form提交时已经做了一次提交了。
                 //如果projectName的值为"tt",如果这个地方不去掉,那么提交接收的值变成"tt,tt"了。
    contentType: "application/x-www-form-urlencoded; charset=utf-8",
    success: function(data) {
    if(data.success){
     $(".infoTips").remove();
     $("#formSucc").show();
     $("#formSucc").append("<label class='infoTips'>"+data.message+"</label>");
    }
    }
  });
 });
  
});
 
 
 
</script>

Java的controller文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
package com.paincupid.springmvc.widget.controller;
 
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
 
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
 
import com.paincupid.springmvc.finance.domain.Finance;
import com.paincupid.springmvc.test.domain.Person;
import com.paincupid.springmvc.util.BaseJsonRst;
import com.paincupid.springmvc.util.CreatMockData;
 
/**
 *
 * @author arthur.paincupid.lee
 * @since 2016.01.24
 *
 */
@Controller
@RequestMapping("/widget")
public class widgetController {
 private static final Logger log = LoggerFactory.getLogger(widgetController.class);
  
 /**
  * 上传文件
  * 在前台的访问路径为: http://localhost:8080/springmvc/widget/uploadFile/view
  * @return
  */
 @RequestMapping("/uploadFile/view")
 public String uploadFile() {
  return "widget/uploadFile";
 }
  
 @ResponseBody
 @RequestMapping(value="/saveFile", method=RequestMethod.POST)
 public BaseJsonRst saveFile(@RequestParam MultipartFile file,
   @RequestParam String projectName) {
  BaseJsonRst view = new BaseJsonRst();
  String orgiginalFileName = "";
  try {
   String fileName = file.getName();
   InputStream inputStream = file.getInputStream();
   String content = file.getContentType();
   orgiginalFileName = file.getOriginalFilename();
   log.info("fileName: "+fileName+", inputStream: "+ inputStream
      +"\r\n content: "+content+", orgiginalFileName: ="+ orgiginalFileName
      +"\r\n projectName: "+ projectName); 
  } catch (IOException e) {
   e.printStackTrace();
  }
  view.setSuccess(true);
  view.setMessage("上传: "+orgiginalFileName+" 文件成功!");
  return view;
 }
 
  
}

下载源码地址:springmvc.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:http://blog.csdn.net/paincupid/article/details/50934222?locationNum=4&fps=1