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

﹏ヽ暗。殇╰゛Y 2022-07-29 09:17 175阅读 0赞

**需要的下载文件：**

jquery.form.js

jquery.js

commons-fileupload.jar

commons-io.jar

**示例图片**

**![20160320005357451][]**

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

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

**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_localhost_8080_springmvc_widget_uploadFile_view]**

**下载源码地址：[http://git.oschina.net/paincupid/springmvc/tree/bootstrap][http_git.oschina.net_paincupid_springmvc_tree_bootstrap]**

**转载请注明出处：[http://blog.csdn.net/paincupid/article/details/50934222][http_blog.csdn.net_paincupid_article_details_50934222]**

[20160320005357451]: /images/20220728/6db04db69ae04973a652986bf595656c.png
[http_localhost_8080_springmvc_widget_uploadFile_view]: http://localhost:8080/springmvc/widget/uploadFile/view
[http_git.oschina.net_paincupid_springmvc_tree_bootstrap]: http://git.oschina.net/paincupid/springmvc/tree/bootstrap
[http_blog.csdn.net_paincupid_article_details_50934222]: http://blog.csdn.net/paincupid/article/details/50934222