风尚云网学习-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>
