input file美化

==> 学习汇总（持续更新）
==> 从零搭建后端基础设施系列（一）-- 背景介绍

input file太丑了，所以美化那是势在必行的。方法很多种。我就介绍两种方法.

1.利用一个按钮去触发input file。
如图:

html代码：

<input type="text" id="show-path" style="height: 30px"/>
<button style="height: 36px" id="btn">选择文件</button>
<input type="file" id="upload" style="display: none;" />

js代码

window.onload = function (){$('btn').onclick = function (){$('upload').click();  //通过按钮触发input file的click事件};$('upload').onchange = function (){$('show-path').value = this.value;  //获取文件伪路径}};function $(id){return document.getElementById(id);}

2.利用div把input file和图片或者按钮包起来
原理如下：用一个div把input file包起来，然后再加一个背景图片，然后把input file的大小设为100%就是整个div的大小，再设置它的透明度为零(不能隐藏，否则点击的时候就点击不到了)。最后设置z-index为最高。当点击div的时候就相当于点击了input file。

效果如图:

html代码如下:

<div id="div1"><div id="div2"><input type="text" id="show" /></div><div id="div3"><input type="file" id="upfile" /><span class="text">选择文件</span></div></div>

css代码

 #div1{width:550px;height:38px;position: relative;margin:40px auto;}#div2{float: left;}#div2 input {width:250px;height: 35px;font-size: 22px;}#div3{float:left;width:140px;height:38px;position: relative;background: url("upload.jpg") no-repeat 0 0;margin-left: 5px;}#div3 input{position: absolute;width:100%;height: 100%;top:0;left: 0;z-index: 1;opacity:0;}.text{display: block;width:140px;height: 38px;position: absolute;top: 0;left:0;text-align: center;line-height: 38px;font-size: 28px;color: orchid;}#div3:hover{background: url("upload.jpg") no-repeat 0 -40px;}

js代码：

window.onload = function (){//当选择文件后，会触发这个事件$('upfile').onchange = function (){$('show').value = this.value;//把获取到的文件伪路径传到编辑框}};function $(id){return document.getElementById(id);}

那个获取的路径是一个伪路径，不是真实的路径。只有文件名是对的。如果是老的浏览器如IE 5 6就会显示真实路径，但是为了安全，高级的浏览器都会隐藏真实的路径.

input file美化相关推荐

input file 美化
思路: input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 代码如下: DOM结构: <a href="j ...
Jquery+CSS Input file 文本框轻美化
HTML原生的input file 上传按钮有多(无)不(力)漂(吐)亮(槽)我就不多说了.大家几乎在项目中都会有遇到图片.等文件需要上传的地方,好看的文件上传按钮会使人身心愉悦(我瞎说的).好了不多 ...
html 美化input file,Input[type=”file”] 显示效果美化方法 | 智慧宫
Html中input可以作为上传图片代码如下但是演示非常不好看,下面做一番美化处理,效果如下: 文件上传美化前后对比美化方法隐藏 input 标签使用 label 标签在input标签位置显示: ...
php文件上传css,CSS_文件上传input file简便美化方案(css)，文件上传input在各个浏览器里 - phpStudy...
文件上传input file简便美化方案(css) 文件上传input在各个浏览器里表现形式都不一样: ie6 ie7,8,9 ff chrome 这里介绍一种简单实用的,在各种浏览器下表现一致的美化 ...
使用elementui美化原生input file
参考: (1)input file上传文件样式美化:input file上传文件样式美化_zuo_zuo_blog的博客-CSDN博客我: (1)先隐藏原生input file,再使用element ...
input file 文件上传标签美化
input 标签通过设置 type 属性为 file,则可以选中文件,通过 accept 设置上传类型 <label class="control-label file"&g ...
怎么修改谷歌浏览器文件提交按钮样式_使用css自定义input file浏览按钮样式
前言文件上传用途非常广泛,浏览器自带文件控件不太美观,很多时候不能满足需求,需要自定义input [type=file]的样式. 不同浏览器的file控件表现形式不一样火狐谷歌 IE 不同浏览器 ...
ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
html5 input file样式修改,css为input type=file设置自定义样式
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 主要有两点需要做: 将input type=file控件透明将inp ...

input file美化

input file美化相关推荐

最新文章

热门文章