样式效果图
在网页开发中，<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