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

所属分类: 软件编程 / java 阅读数: 47
收藏 0 赞 0 分享

需要的下载文件:

jQuery.form.js

jquery.js

commons-fileupload.jar

commons-io.jar

示例图片

pom.xml

<!-- 文件上传 --> 
  <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 解决上传后中文文件名乱码问题

<!-- 解决提交时中文乱码问题 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中添加对上传的支持

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

jsp文件

<%@ 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文件

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; 
 } 
 
  
} 

下载源码地址:http://xiazai.jb51.net/201701/yuanma/springmvc_jb51.rar

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

更多精彩内容其他人还在看

JavaWeb项目部署到服务器详细步骤详解

这篇文章主要介绍了JavaWeb项目如何部署到服务器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

IDEA基于支付宝小程序搭建springboot项目的详细步骤

这篇文章主要介绍了IDEA基于支付宝小程序搭建springboot项目的详细步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解SpringBoot应用服务启动与安全终止

这篇文章主要介绍了SpringBoot应用服务启动与安全终止,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Spring Boot启动及退出加载项的方法

这篇文章主要介绍了Spring Boot启动及退出加载项的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Spring Data Jpa 自动生成表结构的方法示例

这篇文章主要介绍了Spring Data Jpa 自动生成表结构的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

IDEA中osgi的开发应用指南详解

这篇文章主要介绍了IDEA中osgi的开发应用指南详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解用maven将dubbo工程打成jar包运行

这篇文章主要介绍了详解用maven将dubbo工程打成jar包运行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解Java合并数组的两种实现方式

这篇文章主要介绍了Java合并数组的两种实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

使用Jenkins Pipeline自动化构建发布Java项目的方法

这篇文章主要介绍了使用Jenkins Pipeline自动化构建发布Java项目的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用Maven配置Spring的方法步骤

这篇文章主要介绍了使用Maven配置Spring的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多