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

最新推荐文章于 2020-02-09 14:14:43 发布

柳絮飞祭奠

最新推荐文章于 2020-02-09 14:14:43 发布

阅读量173

点赞数

分类专栏： spring ajax 文章标签：测试 java javascript ViewUI

本文链接：https://blog.csdn.net/iteye_14584/article/details/82674408

版权

spring ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

[size=xx-small] [b]表单提交方式文件上传和ajax异步文件上传[/b][/size]

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

[img]http://dl2.iteye.com/upload/attachment/0120/6034/1436b300-bfe7-3b10-a950-6817449a9d6c.png[/img]
这一段我也不知道怎么给大家讲解就是直接贴代码了哈
前端的代码

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

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

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

现在就是直接选择文件提交表单就可以传递数据
[size=x-small]二：ajax的异步文件上传

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

<%@ 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();
  }

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

柳絮飞祭奠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
spring mvc ajax异步文件的上传和普通文件上传

[size=xx-small] [b]表单提交方式文件上传和ajax异步文件上传[/b][/size][size=x-small]一：首先是我在spring mvc下的表单提交方式上传ssm的包配置我就不一一详细列出来了，但是上传的包我还是列出来[/size][img]http://dl2.iteye.com/upload/attachment/0120/60...
复制链接

扫一扫