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

最新推荐文章于 2019-06-21 16:14:35 发布

arthur.dy.lee

最新推荐文章于 2019-06-21 16:14:35 发布

阅读量4.6k

点赞数

分类专栏： Spring 文章标签： jquery.form上传 jquery.form 上传 springmvc

本文链接：https://blog.csdn.net/paincupid/article/details/50934222

版权

Spring 专栏收录该内容

68 篇文章 1 订阅

订阅专栏

需要的下载文件：

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://localhost:8080/springmvc/widget/uploadFile/view

下载源码地址：http://git.oschina.net/paincupid/springmvc/tree/bootstrap

转载请注明出处：http://blog.csdn.net/paincupid/article/details/50934222