个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章springmvc利用jquery.form插件异步上传文件示例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

需要的下载文件:

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 。

最后此篇关于springmvc利用jquery.form插件异步上传文件示例的文章就讲到这里了,如果你想了解更多关于springmvc利用jquery.form插件异步上传文件示例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： 深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
文章推荐： php微信公众号js-sdk开发应用
文章推荐： checkbox选中与未选中判断示例
文章推荐： php微信高级接口调用方法（自定义菜单接口、客服接口、二维码）
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com