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

最新推荐文章于 2022-11-07 15:55:07 发布

风尚云网

最新推荐文章于 2022-11-07 15:55:07 发布

阅读量989

点赞数 7

分类专栏：风尚云网学习文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/zsx0806/article/details/124127569

版权

风尚云网学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这个博客展示了如何使用HTML和原生JavaScript创建一个文件上传页面，同时避免表单提交后的页面跳转。通过设置form的target属性为一个隐藏的iframe，可以实现后台处理文件上传而不会离开当前页面。代码中还包括了上传按钮的样式美化和事件处理函数，确保至少选择一个文件后再提交。

摘要由CSDN通过智能技术生成

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