风尚云网学习-HTML+原生js上传文件页面提交不跳转页面效果图：
众所周知，from表单提交后会自动跳转url， 此时我们可以用一个空的frame 接收，阻止跳转
废话不多说，上全部代码：?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>风尚云网HTML+原生js上传文件页面</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
text-align: center;
}
.sbox {
width: 500px;
height: 250px;
display: inline-block;
text-align: center;
border: 2px solid #000;
margin-top: 40px;
border-radius: 25px;
}
.sbox1 {
border: 2px solid #409EFF;
}
.sbox:hover {
border: 2px solid #409EFF;
}
.sbox1:hover {
border: 2px solid #000;
}
.title {
width: 500px;
height: 50px;
line-height: 50px;
font-size: 20px;
font-weight: 600;
text-align: center;
display: inline-block;
margin-bottom: 70px;
border: 1px solid #f4f5f6;
border-radius: 25px;
background-image: linear-gradient(to right, #1c92d2 0%, #f2fcfe 76%, #1c92d2 100%);
color: #fff;
}
.title1 {
background-image: linear-gradient(to right, #0099F7 0%, #F11712 51%, #0099F7 100%);
}
.title1:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
.fileipt {
width: 230px;
font-size: 16px;
height: 25px;
line-height: 25px;
background: #FAFAFB;
border-radius: 2px;
}
.sub {
background-image: linear-gradient(to right, #1c92d2 0%, #f2fcfe 60%, #1c92d2 100%)
}
.sub {
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border: none;
border-radius: 10px;
display: inline-block;
}
.sub:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
.sub1 {
background-image: linear-gradient(to right, #0099F7 0%, #F11712 51%, #0099F7 100%)
}
.sub1 {
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
border: none;
display: inline-block;
}
.sub1:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div class="box">
<h1>文件上传系统</h1>
<div class="sbox">
<span class="title">上传</span>
<form action="url" method="post" target="stop" enctype="multipart/form-data">
<input type="file" name="file" id="files1" multiple="multiple" accept=".txt">
<input type="submit" class="sub" onclick=pwd()>
</form>
</div>
<div class="sbox">
<span class="title">上传</span>
<form action="url" method="post" target="stop" enctype="multipart/form-data">
<input type="file" name="file" id="files2" multiple="multiple" accept=".txt">
<input type="submit" class="sub" onclick=pwd()>
</form>
</div>
<div class="sbox">
<span class="title">上传</span>
<form action="url" method="post" target="stop" enctype="multipart/form-data">
<input type="file" name="file" id="files3" multiple="multiple" accept=".txt">
<input type="submit" class="sub" onclick=pwd()>
</form>
</div>
<div class="sbox sbox1">
<span class="title title1">上传</span>
<form action="url" method="post" target="stop" enctype="multipart/form-data">
<input type="file" name="file" id="files4" multiple="multiple" accept=".txt">
<input type="submit" class="sub1 " onclick=pwd()>
</form>
</div>
<div class="sbox sbox1">
<span class="title title1">上传</span>
<form action="url" method="post" target="stop" enctype="multipart/form-data">
<input type="file" name="file" id="files5" multiple="multiple" accept=".txt">
<input type="submit" class="sub1" onclick=pwd()>
</form>
</div>
<div class="sbox sbox1">
<span class="title title1">上传</span>
<form action="url" method="post" target="stop" enctype="multipart/form-data">
<input type="file" name="file" id="files6" multiple="multiple" accept=".txt">
<input type="submit" class="sub1" onclick=pwd()>
</form>
</div>
<iframe name="stop" style="display:none;"></iframe>
</div>
</body>
<script>
function pwd() {
const files1 = document.querySelector('#files1').files;
const files2 = document.querySelector('#files2').files;
const files3 = document.querySelector('#files3').files;
const files4 = document.querySelector('#files4').files;
const files5 = document.querySelector('#files5').files;
const files6 = document.querySelector('#files6').files;
if (files1.length | files2.length | files3.length | files4.length | files5.length | files6.length) {
console.log(file);
console.log("已提交");
alert("已提交");
} else {
alert("请至少选择一个文件");
}
}
</script>
</html>
