zoukankan      html  css  js  c++  java
  • HTML上传控件input=file的美化

    最近在研究上传的问题,html5支持ajax上传文件,不支持html5的可以用iframe替换(flash这个cpu/mem老虎请靠边站),但如果真的要在项目中应用,绝对不可以直接用 <input type="file" name="upload" />就完事了,必须要美化,美化的作用,1,使得所有浏览器下,看起来一样,2,提供一个一致的入口,方便操作。

    看看原生态的input=file在各个浏览器下的造型:

     各个浏览器下的上传控件显示样式

    上图为我的debian系统下,Firefox, Opera, Chrome浏览下的file样式,最后一个IE是虚拟机里的表现。

    丑陋不堪,而且严重的不统一。除IE浏览器外,其他浏览器下,单击按钮任何一个地方都可以弹出选择文件对话框,

    而IE必须要单击到“浏览”按钮才可以触发。

    美化的原理:将input到一个div框里,div设置position为relative,input设置position为absolute,opacity设置为0,这样input表现为全透明,不可见,但覆盖在文字之上,div里的其他文字可以显示出来,而单击div,依然会触发上传事件。

    html代码:

    <divclass="u-file-c u-file-btn">         <inputtype="file"name="attach"/>请选择上传文件 </div>

    CSS代码:

    .u-file-btn {         position: relative; direction:ltr; height:18px;          line-height:18px;  margin-right:10px; padding:3px0;          text-align: center;  width:105px; background:#880000; color:#FFF;}
    .u-file-btn input{         cursor: pointer; text-align: right; z-index:10;         position: absolute; top:0px; right:0px; opacity:0.5; filter:Alpha(opacity:50);}

    为了调试得到最佳效果,暂时先设置透明度为 50%,以方便调试。

    看看各个浏览器的截图:

     将input置为透明

    Firefox和Opera比较相似,而Chrome后面跟了一堆文字,但是文件也可以单击,最糟糕的是IE,IE虽然看上去像Firefox,但IE下的文本框部分不可以单击,只有按钮才可以单击触发上传事件,如果按钮的大小刚刚好和 “浏览” 两个字所在的按钮一样,则没有问题,但有时候往往需要写多一点的文字,这时候,只有单击按钮最右部分才可以起作用,下面看看怎么解决这个问题。

    IE下使用 size/ width 都不可以使 “浏览” 按钮变大 ,只有一种办法可以,就是font-size,而根据一个现有的ajaxupload控件,font-size并不是可以随便设置一个很大的值,最后确定的font-size为118px工作的很好。

    设置下input的字体大小:

    .u-file-btn input{         cursor: pointer; text-align: right; z-index:10; font-size:118px;/* font-size: 118px 工作正常 */         position: absolute; top:0px; right:0px; opacity:0.5; filter:Alpha(opacity:50);}

      这时候,Chrome下已经看不到input框了,因为chrome的最右边是文字部分,而且有很多空白,所以放大文字后,基本看不到input了,Firefox、Oprea、IE都可以看到。

    上传文本框放大字体后

    好现在只需要把外层div的overflow的部分hide掉,还有opacity调整为0,最终的CSS代码为:

    .u-file-btn {         position: relative; direction:ltr; height:18px; overflow:hidden;         line-height:18px;  margin-right:10px; padding:3px0;          text-align: center;  width:105px; background:#880000; color:#FFF;}
    .u-file-btn input{         cursor: pointer; text-align: right; z-index:10; font-size:118px;/* font-size: 118px 工作正常 */         position: absolute; top:0px; right:0px; opacity:0; filter:Alpha(opacity:0);}

     到这里基本就算完成了,但是实际上,为了兼容不同的情况,input外层div的class: u-file-btn不是在页面加载的时候就写上去的,而是用js动态赋予的,这个时候,firefox/chrome下没有问题,而Opera和IE出现了异常:

     页面html的代码:( 需要jquery )

        <body>         <divclass="u-file-c">             <inputtype="file"name="attach"/>选择上传文件         </div>         <scripttype="text/javascript">             $(document).ready(function(){                 $('.u-file-c').addClass('u-file-btn');             });         </script>     </body>

    IE和Opera在动态赋值Class时bug

    这样一来,font-size就完全失去了作用了。经过大量测试发现,document.ready事件之后,也就是页面渲染完毕后,再赋值font-size并不能实际改变input的大小,就算改变,也会变得很怪异,而如果是采用js动态生成的input按钮,这样插入页面后,显示正常。

    比如采用 document.appendChild('input')这样的方法。

    修改成动态添加input元素:

    <body>         <divclass="u-file-c">         </div>         <scripttype="text/javascript">             $(document).ready(function(){                 $('.u-file-c').addClass('u-file-btn').html('<input type="file" name="attach" />选择上传文件');             });         </script>  </body>

     上面的代码采用动态添加input方法,IE和Opera恢复正常,

    但通常我不会把这个东西完整的抽象成插件,我的习惯在现有的和html代码上用js添加内容,这样做的好处是,没js代码依然可以正常运行,而且html代码可以实现比较复杂的页面布局,如果完全采用js来生成表单很多地方不方便,

    最后的代码可以是这样:

    <body>         <divclass="u-file-c">             <inputtype="file"name="attach"/>选择上传文件         </div>         <scripttype="text/javascript">             $(document).ready(function(){                 $('.u-file-c').addClass('u-file-btn');                 $('.u-file-c').each(function(i, el){                     $(this).html($(this).html());                 })             });         </script></body>

    这样工作完全正常,也没有影响以前的布局。

  • 相关阅读:
    Linux内核网络协议栈优化总纲
    Java实现 蓝桥杯VIP 算法训练 连续正整数的和
    Java实现 蓝桥杯VIP 算法训练 连续正整数的和
    Java实现 蓝桥杯VIP 算法训练 寂寞的数
    Java实现 蓝桥杯VIP 算法训练 寂寞的数
    Java实现 蓝桥杯VIP 算法训练 学做菜
    Java实现 蓝桥杯VIP 算法训练 学做菜
    Java实现 蓝桥杯VIP 算法训练 判断字符位置
    Java实现 蓝桥杯VIP 算法训练 判断字符位置
    Java实现 蓝桥杯VIP 算法训练 链表数据求和操作
  • 原文地址:https://www.cnblogs.com/hejia/p/2937196.html
Copyright © 2011-2022 走看看