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

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

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

样式效果图

在网页开发中,<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命令是如何识别文件的类型的    (阅读:3914)
  2. IE7 form中input背景图片失效的解决    (阅读:3079)
  3. 推荐三十款CSS样式选择器代码    (阅读:2722)
  4. HTML input type=file文件选择表单元素二三事    (阅读:1276)
  5. 降低样式计算的范围和复杂度    (阅读:840)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1