风尚云网学习-H5+css3+js上传文件页面提交不跳转

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

风尚云网学习-H5+css3+js上传文件页面提交不跳转相关推荐

七牛云 vue 图片上传简单解说，js 上传文件图片
七牛云 vue 图片上传简单解说,js 上传文件图片一.七牛云简介首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范. 七牛云有免费的使用额 ...
js上传文件到c 服务器,js上传文件到c服务器
js上传文件到c服务器内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据 ...
python post 上传文件_Python通过POST方式上传文件及提交参数到远程服务器
前言在树莓派开发过程中,因为没有公网IP,为了方便访问获取信息,有时候我们需要将树莓派获取到的一些数据或文件上传到云端服务器.这是一个比较简便的方法. Python代码需要用到requests库, ...
html表单调用js文件上传,简单实现js上传文件功能
本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下一.用input完成上传,效果图如选择文件后,提交后出现图片url 二.传输格式采用form-data形式. html代 ...
[原创]使用ajaxFileUpload.js上传文件时附带额外参数。
最近公司的一个项目涉及到导入Excel的功能,于是就想到用ajaxFileUpload来实现上传文件,因为用过很多次了,网上也有很多文章介绍.使用方法不表.但是在附带参数这个环节卡住了:文件可以上传到 ...
纯js上传文件很好用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
静态html js文件上传,js实现动态添加上传文件页面
发邮件是需要添加一些文件,每添加一个文件,页面上可以显示一个表单文件上传选项. 此功能为:初始时刻只有一个添加按钮,当点击添加文件时,会增加一个选择文件和删除区域,同时显示上传按钮,当点击删除,此行选 ...
Node.js 上传文件(multiparty包) (基于express)
文件上传.js: //文件上传插件的使用 multiparty包 /* body-parser包只能处理post请求,不能上传图片. multiparty包post请求和文件都可以处理 1.cnpm ...
使用jquery.fileupload.js上传文件时添加进度条
1.首先页面用来展示上传按钮和显示进度条的 <tr><td style="width:140px;text-align: right;padding-top: 13px ...

风尚云网学习-H5+css3+js上传文件页面提交不跳转

风尚云网学习-H5+css3+js上传文件页面提交不跳转相关推荐

最新文章

热门文章