使用FormData异步提交文件上传

最新推荐文章于 2023-04-26 14:32:07 发布

q42368773

最新推荐文章于 2023-04-26 14:32:07 发布

阅读量690

点赞数

分类专栏： web ajax

本文链接：https://blog.csdn.net/q42368773/article/details/104058381

版权

web 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>出错了</title>
		<link rel="stylesheet" href="<%=path %>/page/css/luntan.css">
		<script type="text/javascript" src="<%=path%>/page/js/jquery-2.1.4.min.js"></script>
	<script>
	function show1(){
		
		var form = $("#form1")[0]; //jquery对象转DOM对象
		
		//把form1的表单，赋值给FormData对象，构造参数必须是DOM对象 FormData仅支持高版本浏览器
		var formData = new FormData(form);
		$.ajax({
	        type: 'POST',
	        url: '/tesla-demo-manager-app/hello/uploadFile.upload',
			data : formData,
			contentType: false,   //必须设置为false
			processData: false,   //必须设置为false
			dataType : 'json',
			success : function(result) {
				console.log(result)
			},
			error : function() {
				alert("系统异常");
			}
		});
		
		
	}
	
	function show2(){
		
		var rydm = $("#div1").find("input[name=rydm]").val();
		var rymc = $("#div1").find("input[name=rymc]").val();
		var file = $("#div1").find("input[name=file]")[0].files[0]
		
		//声明一个表单对象，并对表单赋值，FormData仅支持高版本浏览器
		var formData = new FormData();
		formData.append("rydm",rydm);
		formData.append("rymc",rymc);
		formData.append("file",file);
		$.ajax({
	        type: 'POST',
	        url: '/tesla-demo-manager-app/hello/uploadFile.upload',
			data : formData,
			contentType: false,   //必须设置为false
			processData: false,   //必须设置为false
			dataType : 'json',
			success : function(result) {
				console.log(result)
			},
			error : function() {
				alert("系统异常");
			}
		});
	}
	
	
	function showTesla(){
		$.ajax({
			type: 'POST',
	        url: 'http://127.0.0.1:8080/tesla-demo-manager-app/hello/helloworld.json',
	        data : {userName:'zhangsan',date:'2017-01-01'},
			dataType : 'json',
			success : function(result) {
				alert(result.reply.result)
				console.log(result);
			},
			error : function() {
				alert("系统异常");
			}
		});
	}
	
</script>
	</head>

	<body>
	
		<button onclick="showTesla()">tesla-ajaxSubmit-test</button><br>
		
		<!-- 带form的上传   在执行完ajax方法后，页面会再次提交表单 ,所以加上onsubmit="return false;"-->
		<form id="form1" onsubmit="return false;">
			<input type="hidden" name="rydm" value="0000048722" ><br>
			<input type="hidden" name="rymc" value="冯刚" > <br>
			<input type="file" name="file" ><br>
			<button onclick="show1()">button1</button><br>
		</form>
		
		<!-- 不带form的上传 -->
		<div id="div1">
			<input type="hidden" name="rydm" value="0000048722" ><br> 
			<input type="hidden" name="rymc" value="冯刚" ><br> 
			<input type="file" name="file"><br>
			<button onclick="show2()">button2</button>
		</div>
		
		<a href="/tesla-demo-manager-app/hello/downLoadFile.download">下载</a>

	</body>
</html>

jquery.form.js 上传文件

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>出错了</title>
		<link rel="stylesheet" href="<%=path %>/page/css/luntan.css">
		<script type="text/javascript" src="<%=path%>/page/js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="<%=path%>/page/js/jquery.form.js"></script>
		
	<script type="text/javascript">
    $(function () {
        $("#btnsubmit").click(function () {
            $("#form1").ajaxSubmit({
                success: function (data) {
                    alert(data.msg);
                },
                error: function (error) { alert(error); },
                url: '/siri/test.do', /*设置post提交到的页面*/
                type: "post", /*设置表单以post方法提交*/
                dataType: "json" /*设置返回值类型为文本*/
            });
        });
    });
</script>
	</head>

	<body>
		
		<form id="form1">
			<input type="hidden" name="rydm" value="0000048722" ><br>
			<input type="hidden" name="rymc" value="冯刚" > <br>
	        <input type="file" name="file" />
	        <input type="button" id="btnsubmit" value=" 上 传 " />
    	</form>

	</body>
</html>

@RequestMapping("test")
@ResponseBody
public Map<String, Object> test(MultipartFile file,String rydm,String rymc) {
    Map<String, Object> map = new HashMap<>();
    map.put("msg", "rydm="+rydm+"，rymc="+rymc+"，filename=" + file.getOriginalFilename());
    return map;
}

q42368773

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用FormData异步提交文件上传

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServe...
复制链接

扫一扫