将file标签的"浏览"旋钮换成别的语言或图片(转自别人)

2013-12-02

将file标签的浏览按钮换成别的语言或图片(转自别人)如何将INPUT typefile 的浏览...按钮换成图片呢??

将file标签的"浏览"按钮换成别的语言或图片(转自别人)

如何将INPUT type=file 的"浏览..."按钮换成图片呢??

方法一：（仅支持IE）

?<HTML> ??

? <HEAD> ??

? <TITLE> ? New ? Document ? </TITLE> ??

? <META ? NAME="Generator" ? CONTENT="EditPlus"> ??

? <META ? NAME="Author" ? CONTENT=""> ??

? <META ? NAME="Keywords" ? CONTENT=""> ??

? <META ? NAME="Description" ? CONTENT=""> ??

? <SCRIPT ? LANGUAGE="JavaScript"> ??

? <!-- ??

? function ? test1(){ ??

? form1.fileABC.click(); ??

? form1.textfield.value ? =form1.fileABC.value; ??

? } ??

? //--> ??

? </SCRIPT> ??

? </HEAD> ??

? ??

? <form ? name="form1" ? method="post" ? action=""> ??

? <input ? name="fileABC" ? type="file" ? style="display:none"> ??

? <input ? type="text" ? name="textfield" ? readonly=""> ??

? <input ? type="image" ? src="xxx.jpg" ? onclick="test1()"> ??

? </form> ??

? </body> ??

? </HTML> ??

主要思路：采用CSS把FILE控件隐藏掉，新增加一个TEXT的输入框和图片按钮，把TEXT输入框的属性设置为readonly，用户点击

图片按钮时通过JS触发隐藏的FILE控件的click事件，然后把从选择文件得到的值传递给text文本框，从而实现楼主要求的效果。

当然这只是画面上的效果而已，服务器端文件内容的时候还是用FILE控件的名称来取的。

方法二：（支持所有浏览器）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>upload</title>

#local_firmware{

? ? ? ?position: absolute;

? ? ? ?left: 0;

? ? ? ?left: 8px\9;

? ? ? ?top: 38px;

? ? ? ?filter: alpha(opacity = 0); ?/*IE*/

? ? ? ?-moz-opacity:0; ? ? ? ? ? ? /*Mozilla*/

? ? ? ?opacity: 0; ?

}

</style>

</head>

<body>

<h3 style="color:blue;">将上传file标签的中文"浏览"换成英文"Brower"或图片:</h3>

</tr>

</tbody>

</table>

</form>

</div>

</body>

?思路：就是用一个文本框和一个按钮模枋file标签，并将一个真正的file标签（和模枋的等大小）设为全透明并覆盖在模枋的上面，这样显示的就是模枋的标签，但是点击时实际是点击到真正file标签上

只修改input file组件的浏览按钮样式

input(file)浏览按钮美化
做美工的都知道不同浏览器的浏览按钮（input?type=file）样式有所不同，尤其是谷歌，与其他浏览器的几乎没有相同的地方。这个浏览按钮我们几乎是控制不了它的样式的。下面我来分享一下我的美化方法。
?
首先我们先要了解一下各浏览器的浏览按钮的共同特性：
????1、都可以设置整体的宽度和高度，但在IE、火狐、Opera中设置宽度不影响浏览按钮的宽度；
????2、谷歌中只要是input的区域单击可弹出窗口；IE（IE6中没试）中，单击浏览按钮可以弹出窗口，双击文本框区域可以弹出窗口；火狐和Opera中，单击input任何区域都可以弹出窗口；
????3、设置input字体大小，IE、火狐、Opera的流量按钮都变大了（宽与高）。（这点很重要）；
从上面的共同特性来看，只要第三条是我们最需要的。
?
现在我们可以开始美化了：
????????思路：先用a标签做一个按钮，定好宽度并要加上overflow:hidden;属性，然后将<input?type="file"?/>放在a标签里面，通过定位，将input相对于a的右上角对齐，最后将input的透明度设为0即可。
????????为何要右上角对齐？
????????????????之所以右上角对齐是因为在IE、火狐、Opera中，鼠标放在文本框上鼠标呈文本状态，还有一个原因是IE中在文本区域中需要双击才能弹出窗口，这也是我利用上面提到的共同特性的第三点的原因。
????????示例代码如下：
123456789`<style>a{display:inline-block; width:100px; height:40px; background:red; position:relative; overflow:hidden;}a:hover{background:green;}input{position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);}</style>???`?`<a`?`href="#">????<input`?`type="file"`?`value="浏览"`?`/></a>`
这样各个浏览器的input浏览按钮的样式就达到了一致的效果，file按钮样式美化搞定。

热点排行

Web前端

将file标签的"浏览"旋钮换成别的语言或图片(转自别人)