spring mvc ajax异步文件的上传和普通文件上传

柳絮飞祭奠

浏览: 162962 次
性别:
来自: 重庆

最近访客更多访客>>

xx5333

henxingliwang

lxin410

horsehome

博主相关

博客

微博

相册

留言

关于我

博客专栏

: Angularjs实战
浏览量：19261

文章分类

社区版块

存档分类

博客分类：

spring ajax

表单提交方式文件上传和ajax异步文件上传

一：首先是我在spring mvc下的表单提交方式上传
ssm的包配置我就不一一详细列出来了，但是上传的包我还是列出来

这一段我也不知道怎么给大家讲解就是直接贴代码了哈
前端的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件的上传和下载</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js">
	
</script>
<script type="text/javascript" src="js/jquery-form.js">
	
</script>
<script type="text/javascript">
	</script>
</head>
<body>
	<form method="POST" enctype="multipart/form-data" class="fill" action="testFileUpload4Files">
		<table>
			<tr>
			<!-- 这里是多个文件上传 -->
				<td>添加:</td>
				<td><input type="file" name="file" /><br /> <input
					type="file" name="file" /><br /> <input type="file" name="file" /><br />
					<input type="file" name="file" /><br /></td>
			</tr>
			<tr>
				<td>描述:</td>
				<td><input type="text" name="desc" />
				</td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="上传" />
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

这里的enctype默认是application/x-www-form-urlencoded当我们设置为multipart/form-data用以支持向服务器发送二进制数据这样我们才能上传。就是这样直接传递到服务器里面去
接下来就是支持多文件传递的服务端的代码

 @RequestMapping("/testFileUpload4Files")
  public String addUser(@RequestParam("file") CommonsMultipartFile[] files,
      HttpServletRequest request) {
    for (int i = 0; i < files.length; i++) {
      System.out.println("fileName：" + files[i].getOriginalFilename());
      if (!files[i].isEmpty()) {
        try {
          files[i].transferTo(new File("d:\\temp\\" + files[i].getOriginalFilename()));
        } catch (IllegalStateException e) {
          e.printStackTrace();
        } catch (IOException e) {
          e.printStackTrace();
        }
      }
    }
    return "/success";
  }

现在就是直接选择文件提交表单就可以传递数据
二：ajax的异步文件上传

相信多数人都会提交表单方式上传文件但是遇到ajax可能有些没遇到过或者没得demo，我也是今天看了不少demo才知道可以用jquery-form.js这个插件来实现
插件里面我们可以直接调用ajaxForm实现异步上传，里面的种种方法定制上传样式就大家去实现了这里就只实现简单的上传，哈哈直接代码
前端代码

<%@ 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;
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<title>springmvc上传文件</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-form.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("input[type='submit']").on("click", function() {
			$(".fill").ajaxForm({
				url : "testFileUpload4Files1", // 请求的url
				type : "post", // 请求方式
				dataType : "text", // 响应的数据类型
				async : true, // 异步
				success : function(data) {
					alert(data);
				},
				error : function() {
					alert("数据加载失败！");
				}
			});
		});
	});
</script>
</head>
<body>
	<form method="POST" enctype="multipart/form-data" class="fill">
		<table>
			<tr>
				<td>添加:</td>
				<td><input type="file" name="file" /><br /> <input
					type="file" name="file" /><br /> <input type="file" name="file" /><br />
					<input type="file" name="file" /><br />
				</td>
			</tr>
			<tr>
				<td>描述:</td>
				<td><input type="text" name="desc" /></td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="上传" /></td>
			</tr>
		</table>
</body>
</html>

服务端我是返回他的一个文件名表示上传成功

@ResponseBody
  @RequestMapping(value="/testFileUpload4Files1",produces = "text/html;charset=UTF-8")
  public String ajaxUpload(@RequestParam("file") CommonsMultipartFile[] files,
      HttpServletRequest request) {
    StringBuffer buffer = new StringBuffer();

    for (int i = 0; i < files.length; i++) {
      buffer.append(files[i].getOriginalFilename());
      System.out.println("fileName：" + files[i].getOriginalFilename());
      if (!files[i].isEmpty()) {
        try {
          files[i].transferTo(new File("d:\\temp\\" + files[i].getOriginalFilename()));
        } catch (IllegalStateException e) {
          e.printStackTrace();
        } catch (IOException e) {
          e.printStackTrace();
        }
      }
    }
    return buffer.toString();
  }

好的写完了提供大家参考的主要还是源码大家可以直接看源码