如何实现文件的同步/异步上传_浏览器文件上传异步-优快云博客

本文介绍了一种使用jQuery实现的前端文件上传方法，包括同步和异步上传方式，并展示了如何通过AJAX提交表单及文件到后端进行处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（JS使用的是JQuery）

前端页面这么写就够了


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传excle表</title>
<script src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
	function saveReport() {
		// jquery 表单提交 
		$("#uploadForm").ajaxSubmit(function(message) {
			// 对于表单提交成功后处理，message为提交页面saveReport.htm的返回内容 
			alert(message);
		});
		return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转 
	}
	function check(file) {
		if (file.value == null || file.value == "") {
			alert("请您选择要导入的Excel数据!");
			return false;
		}
	}
</script>
 
</head>
<body>
	<div>
		<form id="uploadForm" enctype="multipart/form-data" action="/student"
			method="post" onsubmit="return saveReport();">
			<!--  target="nm_iframe"" -->
			<input class="file input" type="file" id="file" name="file"
				multiple="multiple" /><label>上传学生信息</label> <input type="submit"
				onclick="return check(file)" value="上传"
				style="position: relative; top: 0px; left: 180px; height: 24px;" />
			<!--  <button id="upload" type="button" onclick="picture();">上传</button>  -->
		</form>
		<!-- <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe> -->
	</div>
	
 
	<script src="js/jquery-form.js"></script>
</body>
</html>

后台这么接收：



@Controller
public class WebStudentController {

private static final Logger log = LoggerFactory.getLogger(WebStudentController.class);


@RequestMapping("/student")
@ResponseBody
public String upload(@RequestParam("file1") MultipartFile[] file,HttpServletRequest request) {	

//中间代码省略
}
}

异步上传：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传excle表</title>
<script src="js/jquery-1.8.0.min.js"></script>
<!-- <script type="text/javascript">
	function saveReport() {
		// jquery 表单提交 
		$("#uploadForm").ajaxSubmit(function(message) {
			// 对于表单提交成功后处理，message为提交页面saveReport.htm的返回内容 
			alert(message);
		});
		return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转 
	}
	function check(file) {
		if (file.value == null || file.value == "") {
			alert("请您选择要导入的Excel数据!");
			return false;
		}
	}
	
</script> -->
 
<script type="text/javascript">
function subimtBtn() { 
	 var form = $("form[name=file]"); 
	 var options = {  
	 url:'/upload', //上传文件的路径  
	 type:'post',
	 success:function(data){  
	  alert(data); 
	  //....       //异步上传成功之后的操作
	  }
	 };  
	 form.ajaxSubmit(options); 
	} 
 
function subimtBtn1() { 
	 var form = $("form[name=file1]"); 
	 var options = {  
	 url:'/student', //上传文件的路径  
	 type:'post',
	 success:function(data){  
	  alert(data);
	  //....       //异步上传成功之后的操作
	  }
	 };  
	 form.ajaxSubmit(options);  
	} 
function subimtBtn2() { 
	 var form = $("form[name=file2]"); 
	 var options = {  
	 url:'/teacher', //上传文件的路径  
	 type:'post',
	 success:function(data){  
		  alert(data);
	  //....       //异步上传成功之后的操作
	  }
	 };  
	 form.ajaxSubmit(options); 
	} 
</script>
<style>
	body{
		background: #eefff2;
		color: #00380c;
	}
	.box{
		text-align:center;
	}
	/* .box span:nth-child(1){
		margin-right: 48px;
	}
	.box span:nth-child(2){
		margin-right: 32px;
	} */
	.tit{
		font-size: 36px;
		font-family: 楷体;
		line-height: 90px;
		border-bottom: #00C62D 3px solid;
	}
	.row{
		line-height: 55px;
		/* border-bottom: #00C62D 1px solid; */
	} 
	.put{
		position: relative;
		top: 0px;
		left: 60px;
		background: #83ff9f;
		border: #00c62d 1px solid;
		border-radius: 3px;
		height: 24px; 
		position: relative; 
		top: 0px; 
		left: 60px; 
		height: 24px;
	}
	.put:hover{
		box-shadow:inset #a4ada4eb 0 0 10px 0;
		cursor:pointer;
	}
</style>
</head>
<body>
	<div class="box">
		<div class="tit">上传excle表</div> 
		<div class="row">
			<form id="uploadForm" enctype="multipart/form-data" action="" name="file"
				method="post" > <!-- onsubmit="return saveReport();"  -->
				<input class="file input" type="file" id="file" name="file"
					multiple="multiple" /><label style="margin-right: 48px;">上传教学班信息</label> <input type="button"
					onclick="subimtBtn();" value="上传"
					class="put" />			
			</form>
		</div>
		<div class="row">
			<form id="uploadForm" enctype="multipart/form-data" action="" name="file1"
				method="post" onsubmit="return saveReport();">
				<!--  target="nm_iframe"" -->
				<input class="file input" type="file" id="file" name="file1" multiple="multiple" /><label style="margin-right: 32px;">上传学生详细信息</label> 
				<input type="button" onclick="subimtBtn1();" value="上传"
				class="put"/>
			</form>
		</div>
		<div class="row">
			<form id="uploadForm" enctype="multipart/form-data" action="" name="file2"
				method="post" onsubmit="return saveReport();">
				<!--  target="nm_iframe"" -->
				<input class="file input" type="file" id="file" name="file2" multiple="multiple" /><label>上传教师授课详细信息</label>
				 <input type="button" onclick="subimtBtn2();" value="上传"
				class="put" />
			</form>
		</div>
	</div>
	<script src="js/jquery-form.js"></script>
</body>
</html>

参考文献：
https://blog.youkuaiyun.com/qq_41790332/article/details/84349631