自定义文件框样式

于 2020-06-07 22:32:51 发布
阅读量210 收藏
点赞数
分类专栏： 前端 文章标签： 前端 javascript css 封装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daodfs111/article/details/106608398
版权

目录

效果图

在这里插入图片描述

原理

IE10及以下版本只能通过用户点击input file文件框上传代码，将文件框透明度设置为0.01即可。

HTML代码

<body>
    <span class="sunui-filebox-container">
        <div class="sunui-filebox-subcontainer">
            <input id="text" type="text" class="content-container" value="未选择文件" readonly>
            <div class="sunui-filebox-btn">选择文件</div>
            <div class="container-select">
                <input id="file" type="file" name="file" class="file-select" title="" multiple="multiple">
            </div>
        </div>
    </span>
</body>

CSS代码

.sunui-filebox-container {
    display: inline-block;
    background-color: #F0F0F0;
    border: 1px solid #80C0F0;
    width: 200px;
    height: 20px;
    font-size: 1em;
    overflow: hidden;
}

.sunui-filebox-container .sunui-filebox-subcontainer {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 200px;
    height: 20px;
    overflow: hidden;
}

.sunui-filebox-container .content-container {
    position: absolute;
    top: 0;
    left: 4px;
    border: 0;
    margin: 0;
    outline:0 none !important;
    width: 117px;
    height: 18px;
    line-height: 18px;
    color: #606060;
    background-color: #F0F0F0;
}

.sunui-filebox-container .sunui-filebox-btn {
    position: absolute;
    top: 0;
    right: 0;
    border-left: 1px solid #80C0F0;
    width: 74px;
    height: 20px;
    background-color: #30A0FF;
    text-align: center;
    line-height: 20px;
    font-size: 0.96em;
    font-family: "Microsoft YaHei", "微软雅黑", serif;
    font-weight: normal;
    color: #202020;
}

.sunui-filebox-container .container-select {
    position: absolute;
    right: 0;
    top: 0;
    width: 74px;
    height: 20px;
    overflow: hidden;
}

.sunui-filebox-container .file-select {
    position: absolute;
    top: 0;
    right: 0;
    height: 1000px;
    width: 3000px;
    opacity: 0.01;
    filter: Alpha(opacity = 1);
    font-size: 200em;
    cursor: pointer;
}

Javascript代码

window.onload = function () {
    document.getElementById('file').onchange = function (ev) {
        if(this.files && Object.prototype.toString.call(this.files) === '[object FileList]') {
            if(this.files.length === 0) {
                document.getElementById('text').value = '未选择文件';
            } else if(this.files.length === 1) {
                document.getElementById('text').value = this.value;
            } else {
                document.getElementById('text').value = '已选择' + this.files.length + '个文件';
            }
        } else {
            if(this.value) {
                document.getElementById('text').value = this.value;
            } else {
                document.getElementById('text').value = '未选择文件';
            }
        }
    };
}

封装代码

CSS代码

.sunui-filebox-container {
    display: inline-block;
    background-color: #F0F0F0;
    border: 1px solid #80C0F0;
    width: 200px;
    height: 16px;
    font-size: 1em;
    overflow: hidden;
}

.sunui-filebox-container .sunui-filebox-subcontainer {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 200px;
    height: 16px;
    overflow: hidden;
}

.sunui-filebox-container .content-container {
    position: absolute;
    top: 0;
    left: 4px;
    border: 0;
    margin: 0;
    outline:0 none !important;
    width: 117px;
    height: 14px;
    line-height: 14px;
    color: #606060;
    background-color: #F0F0F0;
}

.sunui-filebox-container .sunui-filebox-btn {
    position: absolute;
    top: 0;
    right: 0;
    border-left: 1px solid #80C0F0;
    width: 74px;
    height: 16px;
    background-color: #30A0FF;
    text-align: center;
    line-height: 16px;
    font-size: 0.96em;
    font-family: "Microsoft YaHei", "微软雅黑", serif;
    font-weight: normal;
    color: #202020;
}

.sunui-filebox-container .container-select {
    position: absolute;
    right: 0;
    top: 0;
    width: 74px;
    height: 16px;
    overflow: hidden;
}

.sunui-filebox-container .file-select {
    position: absolute !important;
    top: -1px !important;
    right: 0 !important;
    height: 1000px !important;
    width: 3000px !important;
    opacity: 0.01 !important;
    filter: Alpha(opacity = 1) !important;
    font-size: 200em !important;
    outline:0 none !important;
    cursor: pointer !important;
}

Javascript代码

(function(window, document) {
    var sunArray = [];
    if (!window.sunui) {
        window.sunui = {};
    }

    window.sunui.addEventListener = function (dom, event, func) {
        if(window.addEventListener) {
            dom.addEventListener(event, func, false);
        } else if(window.attachEvent) {
            dom.attachEvent('on' + event, func);
        } else {
            dom['on' + event] = func;
        }
    };

    window.sunui.removeEventListener = function (dom, event, func) {
        if(window.removeEventListener) {
            dom.removeEventListener(event, func, false);
        } else if(window.detachEvent) {
            dom.detachEvent('on' + event, func);
        }
    };

    window.sunui.guid = function() {
        function S4() {
            return (((1 + window.Math.random()) * 0x10000)|0).toString(16).substring(1);
        }
        return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4());
    };

    window.sunui.trim = function (str) {
        if(typeof str !== 'string') {
            return str;
        }
        if(String.prototype.trim) {
            return str.trim();
        } else {
            return str.replace(/(^\s*)|(\s*$)/g, '');
        }
    };

    window.sunui.hasClass = function (ele, cls) {
        cls = cls || '';
        if (cls.replace(/\s/g, '').length === 0) return false;
        return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ');
    };

    window.sunui.addClass = function (ele, cls) {
        if (!window.sunui.hasClass(ele, cls)) {
            ele.className = (ele.className ? ele.className + ' ' + cls : cls);
        }
    };

    window.sunui.removeClass = function (ele, cls) {
        if (window.sunui.hasClass(ele, cls)) {
            var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
            while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                newClass = newClass.replace(' ' + cls + ' ', ' ');
            }
            ele.className = newClass.replace(/^\s+|\s+$/g, '');
        }
    };

    window.sunui.isValidNumber = function (num, flag) {
        if(num == null) {
            return false;
        }
        if(flag) {
            return typeof num === 'number' && !window.isNaN(num) && window.isFinite(num);
        }
        var nu = window.parseInt(num, 10);
        return !!nu || nu === 0;
    };
    
    (function (window, document) {
        window.sunui.filebox = function(node, json) {
            var fileboxNode = null;
            var existNode = null;
            if(!node) {
                return null;
            }
            var el = typeof node === 'string' ? document.getElementById(node) : (node.length ? node[0] : node);
            if(el && sunArray.length) {
                for(var i = 0; i < sunArray.length; i++) {
                    existNode = sunArray[i];
                    if(existNode.el === el || (existNode.el.getAttribute('data-sunui-guid') && existNode.el.getAttribute('data-sunui-guid') === el.getAttribute('data-sunui-guid'))) {
                        return existNode;
                    }
                }
            }
            if(el && json) {
                fileboxNode = new FileboxNode();
                fileboxNode.init(el, json);
                sunArray.push(fileboxNode);
            }

            return fileboxNode;
        };
        
        function FileboxNode() {
            this.el = null;
            this.span = null;

            this.width = 200;
            this.height = 16;
            this.btnWidth = 74;
            this.btnText = '选择文件';
            this.contentText = '未选择任何文件';

            this.onChange = null
        }

        FileboxNode.prototype.init = function(el, settingJson) {
            var thisBox = this;
            var span = document.createElement('span');
            var subContainer = document.createElement('div');
            var contentContainer = document.createElement('input');
            var btn = document.createElement('div');
            var selectContainer = document.createElement('div');

            if (settingJson.btnText) {
                thisBox.btnText = settingJson.btnText;
            }
            if (settingJson.contentText) {
                thisBox.contentText = settingJson.contentText;
            }

            window.sunui.addClass(span, 'sunui-filebox-container');
            window.sunui.addClass(subContainer, 'sunui-filebox-subcontainer');
            contentContainer.type = 'text';
            contentContainer.value = thisBox.contentText;
            contentContainer.readOnly = true;
            window.sunui.addClass(contentContainer, 'content-container');
            btn.innerText = thisBox.btnText;
            window.sunui.addClass(btn, 'sunui-filebox-btn');
            window.sunui.addClass(selectContainer, 'container-select');

            if(window.sunui.isValidNumber(settingJson.width)) {
                thisBox.width = Math.max(parseInt(settingJson.width, 10), 60);
                span.style.width = thisBox.width + 'px';
            } else if(el.style.width && el.style.width.indexOf('px') > 0) {
                thisBox.width = Math.max(parseInt(el.style.width, 10), 60);
                span.style.width = el.style.width;
            }
            if(window.sunui.isValidNumber(settingJson.height)) {
                thisBox.height = Math.max(parseInt(settingJson.height, 10), 16);
                span.style.height = thisBox.height + 'px';
            } else if(el.style.height && el.style.height.indexOf('px') > 0) {
                thisBox.height = Math.max(parseInt(el.style.height, 10), 16);
                span.style.height = el.style.height;
            }
            if(window.sunui.isValidNumber(settingJson.btnWidth)) {
                thisBox.btnWidth = Math.min(Math.max(parseInt(settingJson.btnWidth, 10), 60), thisBox.width);
            } else {
                thisBox.btnWidth = Math.min(Math.max(thisBox.btnWidth, 60), thisBox.width);
            }
            subContainer.style.width = thisBox.width + 'px';
            subContainer.style.height = thisBox.height + 'px';
            contentContainer.style.width = Math.max(thisBox.width - thisBox.btnWidth - 9, 0) + 'px';
            contentContainer.style.height = contentContainer.style.lineHeight = thisBox.height - 2 + 'px';
            btn.style.width = thisBox.btnWidth + 'px';
            btn.style.height = btn.style.lineHeight = thisBox.height + 'px';
            selectContainer.style.width = thisBox.btnWidth + 'px';
            selectContainer.style.height = thisBox.height + 'px';

            if(el.style.display) {
                span.style.display = el.style.display;
            }
            if(el.style.cssFloat) {
                span.style.cssFloat = el.style.cssFloat
            }
            if(el.style.styleFloat) {
                span.style.styleFloat = el.style.styleFloat
            }

            span.style.marginTop = el.style.marginTop || '0';
            span.style.marginRight = el.style.marginRight || '0';
            span.style.marginBottom = el.style.marginBottom || '0';
            span.style.marginLeft = el.style.marginLeft || '0';
            span.style.position = el.style.position;
            span.style.top = el.style.top;
            span.style.right = el.style.right;
            span.style.bottom = el.style.bottom;
            span.style.left = el.style.left;

            el.title = '';
            el.className = '';
            el.removeAttribute('style');
            window.sunui.addClass(el, 'file-select');
            el.setAttribute('data-sunui-guid', window.sunui.guid());

            subContainer.appendChild(contentContainer);
            subContainer.appendChild(btn);
            subContainer.appendChild(selectContainer);
            span.appendChild(subContainer);
            el.parentNode.insertBefore(span, el);
            selectContainer.appendChild(el);
            thisBox.el = el;
            thisBox.span = span;

            if(typeof settingJson.onChange === 'function') {
                thisBox.onChange = settingJson.onChange;
            }

            window.sunui.addEventListener(el, 'change', function(e) {
                if(el.files && Object.prototype.toString.call(el.files) === '[object FileList]') {
                    if(el.files.length === 0) {
                        contentContainer.value = thisBox.contentText;
                    } else if(el.files.length === 1) {
                        contentContainer.value = el.value;
                    } else {
                        contentContainer.value = '已选择' + el.files.length + '个文件';
                    }
                } else {
                    if(el.value) {
                        contentContainer.value = el.value;
                    } else {
                        contentContainer.value = thisBox.contentText;
                    }
                }
                if(typeof thisBox.onChange === 'function') {
                    thisBox.onChange(thisBox);
                }
            });
            return thisBox;
        };

    })(window, document);

})(window, document);

用法

<body>
    <input id="file" type="file" style="position: absolute;top: 200px;left: 300px;" multiple>
</body>

window.onload = function () {
    window.sunui.filebox('file', {
        width: 240,
        height: 28,
        btnWidth: 80,
        btnText: '点我',
        contentText: '您还没有选择文件',
        onChange: function (thisBox) {
        }
    });
}
daodfs1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
文件上传框样式
04-20
NULL 博文链接：https://zhaoshijie.iteye.com/blog/1903977
自定义文件框的样式改进版（兼容IE与FireFox）
pml3466800914的博客
04-12 136
原生的文件上传框&lt;input type="" /&gt;的效果不是很好看， 很多时候，需要改变样式，让它符合客户的要求。比如浏览按钮换成自定义的图片。 网上有一种错误的做法是，把文件上传框设置为隐藏，然后自定义一个文本框和一个按钮，点击按钮时用 js代码调用文件框的click事件弹出选择文件的效果。 这样做纯粹只能看看效果而已，因为浏览器考虑到所谓的安全因素，文件框只...
自定义file文本框样式
09-11
一般的file文本框样式太简单，往往与网站整体样式不协调，现在可以用这种方式改变file的样式
自定义file类型input框样式的方法
alieen_941124的博客
06-06 215
自定义file类型input框样式的方法 在WEB上传文件时，要用到上传框： <input type="file" id="f" name="f"> 这东东在IE(其他偶没经过测试)中是一个非常特殊的对象。 如果是您手动写入的或其他对象经过某些事件...
改变file框样式
liuzhe.cn专栏
07-07 525
New Page 1input{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px}function fclick(obj){  with(obj){    style.posTop=event.srcElement.offsetTop    var x=ev
表单文件选择框样式自定义示例
09-28
在网页设计中，表单元素是用户与网站交互的重要途径，而文件...但需要注意的是，自定义文件选择框样式可能会导致辅助技术（如屏幕阅读器）的兼容性问题，因此在设计时一定要考虑无障碍性，确保所有用户都能顺利使用。
css自定义文件上传按钮样式
06-23
在网页设计中，为了提供更好的用户体验，我们常常需要对文件上传功能进行自定义，使其更加美观和符合网站的整体风格。CSS（Cascading Style Sheets）是实现这一目标的关键工具，它允许我们控制HTML元素的样式，包括...
unity制作的非常简单的自定义消息框Demo
08-12
在Unity中，自定义消息框是提升用户体验和交互性的重要元素。一个消息框通常用于显示通知、警告或者询问用户是否执行某个操作。在Unity中实现自定义消息框，可以让开发者更自由地设计其外观和功能，使其符合项目的...
自定义搜索框
10-24
1. **外观设计**：自定义搜索框可以调整边框样式、颜色、字体、占位符文本等，使其与整体应用或网站的风格保持一致。设计师会关注细节，如按钮形状、输入框的圆角、背景透明度等，以提升视觉效果。 2. **交互性**：...
调节file文件上传框的样式
weixin_30732825的博客
06-04 96
页面： <span class="sl-custom-file"> 　　<a href="#" class="btn btn-green" id="selectFile4" >选择文件</a> 　　<input type="file" name="uploadImage" id="uploadFile4" valu...
超级好看的文本框样式
09-11
有了它之后，页r面上的文本框就非常好看啦，用法很简单，直过复制过来用就可以啦，input表单元素也是通用的
file框样式美化
hugejihu9的专栏
10-30 755
文章来自：源码在线https://www.shengli.me/css/144.html   默认：     美化后：    
input file类型自定义样式-按钮
LiangRZ
12-03 1万+
我们在做页面时有时候为了让上传这种类型的输入看起来更加美观，但是由于其自身往往是无法定义样式的，所以我们经常用按钮来 “替代” 它，接下来讲讲其原理和实践过程。原理：为了让input[type='file']看起来更像一个button，我们首先先采用绝对定位定义一个标签，然后采用绝对定位在相同的位置定义一个和大小完全相同的，并把其透明度设置为0，最后再定义一个div显示上传的文件名即可。为了方便吧
文件上传框样式美化
yanglingchao的博客
08-30 7127
先展示效果图：（没有上传图片的样子）（上传图片后的样子）  没有美化之前的样式（外面的input框是我自己加上去的）ok，说一下思想，首先是建一个input框，type设置为file，但是必须是隐藏的，因为不隐藏就变会显示默认的样子，我觉得有点丑，接着再建一个input框，type设置为text就可以了，用来存放我们上传的文件路径，然后，设置一个a标签，样式取boostrap的按钮样式，当然，你喜
自定义、美化文件选择框
hongouba的博客
09-07 1124
&lt;div class="am-u-lg-6"&gt; &lt;div class="am-input-group pull-left" &gt; &lt;input type="text" class="am-form-field" style="width:160px;height: 34px;f
如何修改input type="file"样式
热门推荐
hua_ban_yu的博客
12-05 2万+
每个浏览器对上传文件 type="file"都有不同的显示效果，如何设置上传文件按钮让其显示效果一致呢？ 这个其实很简单，只需要使用css样式即可。 1.创建一个,然后在这个里面创建 type="file"，同时这个div里面输入要显示的文本 代码： 上传文件 2.设置css样式 代码： .file-box{ display: inline-block;
input file 文件选择框美化
voodooer的专栏
10-12 6904
测试上传文件 * {font-size:12px;margin:0;} body {background:#fff;} form {margin:12px;} input.file{ vertical-align:middle; position:relative; left:-218px; filter:alpha(opacity=0); opacity
美化上传文件框(上传图片框)
luoxuehui_blog的博客
01-25 8975
传统的表单控件十分简陋，可以说是很难看，那怎么办？ 方法:我们自己做一个好看的样式出来，用各种标签啊，css啊，是可以做到的。如图: 做出这样一个样子应该是很简单的，但是怎么让他具有上传的功能的呢？ 那就使用代理的方法，点击上传就等于点击(上传文件表单控件) 废话不多说，直接上代码: html: 测试插件 body{font
美化表单文件选择框：样式自定义教程
表单文件选择框样式 <link rel="stylesheet" type="text/css" href="styles.css"> <!-- 引入样式文件 --> 选择文件点击选择文件" /> ``` CSS部分（styles.css）： ```css body { font-family: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值