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

需要的下载文件：

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

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

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

}

下载源码地址：springmvc.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持快网idc。

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

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

相关文章

快网idc优惠网

相关文章

微信

快网idc优惠网

QQ交流群