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

原创 2016年01月12日 17:00:24

做任务的时候,发现,设计组给的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


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

input type="file" 选取文件路径时出现fakepath问题IE浏览器解决办法

今天写代码时需要用户选取一个文件然后提交,因为需要用到文件的绝对路径,所有我用一个 text文本框接住地址,于是我发现了问题 高版本的浏览器为了安全期间,会将路径的进行隐藏,并且加上fake...

chrome浏览器input[type=file]选择zip、exe等文件卡顿解决办法

在chrome浏览器下,使用input[type=file]上传,点击打开对话框,选择.zip、exe、apk等文件后,再次点击打开对话框,则出现卡顿现象,大概会在5~10秒,经过排查搜索,发现是ch...

input type=file 上传图片前预览 亲测支持 ie8 chrome ff android及ios浏览器(将网上的版本整合一下)

Firefox3,IE6,IE7,IE8上传图片预览 #preview_wrapper{ display:inline-block; width:100px; height:100px; ba...

手机浏览器<input type="file">标签调用手机拍照+分片上传

闲话不多说,开发背景也不是大家关心的话题。就直接说实现如题功能 首先,你的手机要支持html5吧(现在应该都支持吧) 然后,html代码只要一句就够了 上传 这样页面就会有出现一个选择文件的对话框...
  • jyxzfw
  • jyxzfw
  • 2016年09月08日 14:26
  • 1637

Html input[type=file]在chrome浏览器和safari浏览器 与 IE firefox差别修改

var W3CDOM = (document.createElement && document.getElementsByTagName); function initFileUploads() ...
  • leehuat
  • leehuat
  • 2011年11月02日 13:47
  • 1962

解决input[type=file]打开时慢、卡顿问题

昨天临下班测试给我问我为什么图片上传插件打开文件夹的速度这么慢,让我想办法优化一下 然后我就努力的搞了起来_(:з」∠)_ 由于我们内部系统不兼容ie,所以我就没有管ie,在浏览器里面玩了起来 经...

INPUT[type=file]的change事件不触发问题

在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼。它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已。...

JQuery绑定input[type=file]的change事件问题

通过JQuery绑定的change事件($().change)只能被触发一次,,,不管上传失败还是成功,(谷歌、火狐也一样) 还是只能在标签上绑定了: 另外,onchange...

使用Android的webview将web app打包成安卓的app和解决安卓webview不支持input type=file问题

使用Android的webview将web app打包成安卓的app和解决安卓webview不支持input type=file问题...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:处理各大浏览器的<input type="file">显示风格迥异的问题
举报原因:
原因补充:

(最多只允许输入30个字)