技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> 设置<input type=”file”>样式

设置<input type=”file”>样式

浏览:4662次  出处信息
样式效果图

样式效果图

在网页开发中，<input type=”file”>用来控制文件的上传。但这个元素的样式不可控，表现在：一、各个浏览器的样式不同，二、无法更改样式。最关键的是，元素本身影响市容，也无法与整个页面样式和睦相处。所以，有必要拿它开刀，曲线救“美”，颠覆其默认样式。

本文以“上传图片”为例，目的在于更改样式，且在全浏览器中达到统一的效果。效果图你已经看见了。

代码

以下是代码片段：


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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>上传文件</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

<script>

function uploadImgFn(){

var del = "<a href='#this' onclick='uploadImgFnDel()' title='删除'>×</a>&nbsp;";

$('#uploadImgValue').html(del);

var imgName = $('#uploadImg').val().substr($('#uploadImg').val().lastIndexOf("\\")+1);

var imgNewName = imgName.substr(0,20);

$('#uploadImgValue').append(imgNewName);

}

function uplaodImgFnTell(){

$('#uploadImgHiddenTell').val('1');

}

function uploadImgFnDel(){

$('#uploadImg').val('');

$('#uploadImgValue').html('');

$('#uploadImgHiddenTell').val('0');

}

function update(){

if( $('#uploadImgHiddenTell').val() == '1'){

alert('上传文件');

}

else{

alert('异步交互')

}

$('#formContent').focus();

}

</script>

<style>

body a {

text-decoration:none;

color:#983c1b;

}

body a:hover {

color:#024c9f;

}

#layout{

margin:0 auto;

padding:10px;

width:500px;

border:1px solid #333;

text-align:right;

}

#formContent{

width:300px;

height:50px;

overflow:auto;

}

#uploadImg {

filter:alpha(opacity=0);

opacity:0;

width:30px;

position:relative;

z-index:98;

}

.uploadImgValue {

font-size:12px;

color:#666;

position:relative;

left:30px;

*left:5px;

}

*html .uploadImgValue {

font-size:12px;

color:#666;

position:relative;

left:65px;

}

#uploadImgTxt {

color:#983c1b;

font-size:14px;

position:relative;

left:30px;

z-index:97px;

}

*html #uploadImgTxt {

color:#983c1b;

font-size:14px;

position:relative;

left:75px;

z-index:97px;

}

#formButton{

position:relative;

z-index:99;

}

</style>

</head>

<body>

<div id="layout">

<form action="upload.html" method="post" enctype="multipart/form-data">

<p><textarea id="formContent" name="formContent" tabindex="1"></textarea></p>

<p><span id="uploadImgValue" class="uploadImgValue"></span>&nbsp;&nbsp;<span id="uploadImgTxt">图片</span>

<input type="file" name="uploadImg" value="浏览文件"  id="uploadImg" onchange="uploadImgFn();uplaodImgFnTell()" accept= "image/jpeg,image/gif,image/png" title="上传图片" onmouseover="$('#uploadImgTxt').css('color','#024c9f');" onmouseout="$('#uploadImgTxt').css('color','#983c1b');"/>

&nbsp;

<input type="button" value="加入列队" onclick="update()" id="formButton" tabindex="2"/></p>

<p><input type="hidden" id="uploadImgHiddenTell" value="0" /></p>

</form>

</div>

</body>

</html>

实现思路

用词规范：

#(abc)表示ID为abc的元素。

第一步

布置层

布置层

1、布置层<span><input type=”file”><input type=”button”>的z-index，分别对应z轴中的红蓝黑，黑色级别最高。

2、鼠标指向“图片”时，实际上指向的是<input type=”file”>，显示title，触发#uploadImg的onMouseOver事件，更改#uploadImgTxt的颜色。

3、鼠标单击，触发#uploadImg元素本身，并限制了文件类型。“限制”在IE6中无效。

4、选择文件后，触发#uploadImg的onChange事件，将触发两个函数：

- uploadImgFn()  在#uploadImgValue中添加一个×链接，并显示#uploadImg的文件名.扩展名

- uplaodImgFnTell() 修改hidden的#uploadImgHiddenTell元素的值为1

5、鼠标移开，触发#uploadImg的onMouseOut事件，还原#uploadImgTxt的颜色。

第二步

若要更改图片，重复以上动作；若要取消图片，点击文件名.扩展名左侧的×：

1、鼠标指向×，样式表的:hover起作用，更改颜色。

2、鼠标单击，触发#uploadImgValue的onClick事件，将触发一个函数：

- uploadImgFnDel() 清空#uploadImgValue的值；清空#uploadImg的值（在IE6中无效）；还原hidden的#uploadImgHiddenTell元素的值为0

3、鼠标移开，样式表a起作用，还原颜色。

第三步

点击#formButton按钮，触发onClick事件，将触发一个函数：

- upload() 根据#uploadImgHiddenTell的值判断，是进行异步交互的动作，还是实现文件上传的功能。

要点

1、z-index用来控制层级。蓝色层设置为透明，所以“看不见”。设置了#uploadImg的width，为了保险起见，黑色层级大于蓝色，保证按钮可以点击。

2、添加的#uploadImgHiddenTell是为了能在提交后判断是否要上传文件，因为IE6无法清空<input type=”file”>的值。

3、保存代码即可看到效果（需联网，或自行下载jQuery）。该方式的实践，已在参考资料里给出。

参考资料

01 本文原型参考自 “微博列队” http://queue.sinaapp.com

建议继续学习：

  1. linux file命令是如何识别文件的类型的    (阅读：3721)
  2. IE7 form中input背景图片失效的解决    (阅读：3061)
  3. 推荐三十款CSS样式选择器代码    (阅读：2682)
  4. HTML input type=file文件选择表单元素二三事    (阅读：1217)
  5. 降低样式计算的范围和复杂度    (阅读：692)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：HTML5本地存储初探
后一篇：:before和::before的区别 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1