设置<input type=”file”>样式
在网页开发中,<input type=”file”>用来控制文件的上传。但这个元素的样式不可控,表现在:一、各个浏览器的样式不同,二、无法更改样式。最关键的是,元素本身影响市容,也无法与整个页面样式和睦相处。所以,有必要拿它开刀,曲线救“美”,颠覆其默认样式。
本文以“上传图片”为例,目的在于更改样式,且在全浏览器中达到统一的效果。效果图你已经看见了。
代码
以下是代码片段:
<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> "; $('#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> <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');"/> <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
建议继续学习:
- linux file命令是如何识别文件的类型的 (阅读:3914)
- IE7 form中input背景图片失效的解决 (阅读:3079)
- 推荐三十款CSS样式选择器代码 (阅读:2722)
- HTML input type=file文件选择表单元素二三事 (阅读:1276)
- 降低样式计算的范围和复杂度 (阅读:840)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:崔凯(小轰) 来源: 时光立方
- 标签: file input 样式
- 发布时间:2011-01-12 23:27:09
- [68] Go Reflect 性能
- [68] 如何拿下简短的域名
- [67] Oracle MTS模式下 进程地址与会话信
- [62] IOS安全–浅谈关于IOS加固的几种方法
- [61] 图书馆的世界纪录
- [60] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [48] 读书笔记-壹百度:百度十年千倍的29条法则