input file上传文件改变默认样式

王小婷

发布于 2019-11-27 21:26:47

2K0

发布于 2019-11-27 21:26:47

文章被收录于专栏：编程微刊编程微刊

我们知道，在使用到input file上传文件的时候，会出现这样很丑的默认样式，作为前端开发的我们，主要责任就是去优化这些样式，以更美观的方式呈现出来，但是，这个默认样式没有可以去修改的属性，还是比较麻烦的。

这个时候，就需要用到一些障眼法了，将原来的样式隐藏起来，再重新写一个按钮代替，与原来的位置重合即可。

原本的样式是这样的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>       
    </head>
    <body>      
        <input type="file" class="file-upload" />        
    </body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
</script>

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <style>
            #importExcel {
                color: #fff;
                width: 51px;
                height: 30px;
                display: inline-block;
                border: none;
                background: cornflowerblue;
                background-size: 100% 100%;
            }
            
            .change {
                position: absolute;
                display: block;
                width: 103px;
                top: 2px;
                left: 5px;
                height: 40px;
                opacity: 0;
                cursor: pointer;
            }
            
            .file-name {
                position: absolute;
                top: 9px;
                width: 133px;
                height: 30px;
                padding: 0 8px;
                line-height: 25px;
                margin-left: 86px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                cursor: pointer;
            }
            
            .btnMask {
                color: #fff;
                width: 86px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                margin-right: 131px;
                display: inline-block;
                border: none;
                background: cornflowerblue;
                background-size: 100% 100%;
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <form s action="/criminal/import" id="uploadForm" enctype="multipart/form-data" method="post">
            <a class="btnMask">选择文件</a>
            <input class="change" id="mFile" type="file" name="mFile">
            <div class="file-name"></div>
            <input type="button" value="导入" id="importExcel" name="btn">
        </form>
    </body>
    <script>
        $("#mFile").change(function() {
            var arrs = $(this).val().split('\\');
            var filename = arrs[arrs.length - 1];
            $(".file-name").html(filename);
        });
        //导入按钮
        $('#importExcel').click(function() {
            if(checkData()) {
                $('#uploadForm').ajaxSubmit({
                    url: "http://localhost:3000/users",
                    success: function(data) {
                        alert(JSON.stringify(data))
                        for(var i = 0; i < data.length; i++) { // 这里的i是代表数组的下标
                            if(i == data.length - 1)
                                alert("已插入" + data[i] + "条罪犯数据")
                            else
                                alert(data[i])
                        }
                    }
                });
            }
        });

        //JS校验form表单信息    
        function checkData() {
            var fileDir = $("#mFile").val();
            var suffix = fileDir.substr(fileDir.lastIndexOf("."));
            if("" == fileDir) {
                msg(5, "选择需要导入的Excel文件！");
                return false;
            }
            if(".xls" != suffix && ".xlsx" != suffix) {
                msg(5, "选择Excel格式的文件导入！");
                return false;
            }
            return true;
        }
    </script>
</html>