处理各大浏览器的<input type="file">显示风格迥异的问题

做任务的时候,发现,设计组给的psd文件的 上传文件中的<input type="file">的风格长这样
设计中的上传文件按钮
而实际中的各大浏览器一个<input type = "file"长这样:
各大浏览器的<input>样式

这样就导致如果我们只是针对其他的一个浏览器样本改动代码,那么显然是不可取的,但是如果要是对多个浏览器都处理到位那么代码未免太多,现在大家都普遍采用的是把它设置为opacity:0;进行更改,然后设置一个div设置跟input type = “file”同级,再在div里面放一个,用js控制获取input type = “file”的值放到的值里面。

<body>
    <div><input type="text" class="txt"><label></label></div>
    <input mutitple = "mutitple" type = "file" style = "opacity:0" id = "file_input"><!--mutitple是可以多选文件的意思--!>
    <script type = "text/javascript">
        var oDiv = document.querySelector('div');//此选择器属于HTML5类jQuery选择器
        var oTxt = document.querySelector(".txt");

        oDiv.onclick = function(){
            document.querySelector("#file_input").click();
        }
        //下面的函数用来检查当input域的内容改变时发生,在控制台查看
        //要触发显示文件名就要监控file输入框的onchange事件。
        document.querySelector("#file_input").onchange = function(e){
            console.log(e.target.files);//这段内容可以不写,调试用
            if(e.target.files){
                oTxt.value = document.querySelector("#file_input").value;
            }
            console.log(e.target.files);//这段内容可以不写,调试用
        }

    </script>
</body>

下面我们就来写一下前面提到的设计稿的样式,改一下我们的div样式。

<style type="text/css">
    div{

        width: 200px;
        height: 30px;
        border: 1px solid black;
    }
    div>label{
        float: right;
        width: 40px;
        height: 30px;
        margin-right: 10px;
        background: #88b5df

    }
    .txt{
        border: 0;
        width: 150px;
        height: 25px;

    }
</style>

效果如图:

html Dom querySelector()方法:

querySelector是HTML5中类jQuery选择器。还有个querySelectorAll.两个方法使用差不多的语法。,都是接收一个字符串参数,这个参数需要时合法的css选择语法。和query的选择器差不多。具体看博客:
http://www.cnblogs.com/Wayou/p/html5_web_api_queryselector.html


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiguabanhua/article/details/50505399
个人分类: 浅谈前端学习
上一篇HTML5 FormData对象 的上传文件的使用
下一篇javascript中的函数带括号和不带括号的问题。
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭