(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