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

2011-01-07 16:47
样式效果图

样式效果图

在网页开发中,<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

3 条评论 / 引用:

  1. 设置样式:

    […] <!DOCTYPE html PUBLIC "-//W3C//DTD 更多… View full post on 时光立方 […]

  2. M.J:

    谢谢楼主分享,学习了

  3. M.J.XIA:

    谢谢楼主分享,学习了

评论

《对话守则》第一条:对话的目的是寻求真理。

以下选填: