自定义上传控件样式
有些时候我们不需要默认的上传控件input=file的样式，而是现实自定义的样式和文字，而不是单一的“浏览...”样式，我们可以使用浮动层来实现。
原理：将上传控件input=file设置为透明的，然后添加2个控件。
1）一个在上传控件input=file的“浏览...”按钮下面，因为上传控件input=file是透明的，所以看到的是这个自己定义的控件，不过注意大小和位置要和上传控件input=file的“浏览...”一致。
2）一个放置在上传控件input=file控件的输入区域，遮盖住输入区域，防止点击输入部分显示光标。要不即使透明点击输入部分还是会显示光标。
大概的效果代码如下
<iframe name="upload_target" id="upload_target" style="display:none"></iframe>
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" name="docFrm">
<div style="position:relative;width:225px;"> <!--下面3个控件的位置不要更改，但是另外2个控件如何遮盖住file控件，如果在你的浏览器上有差异，自己调下style属性-->
<input type="button" value="选择文件" style="position:absolute;right:0px;" /><!--显示给用户看的，注意按钮大小要和file的浏览基本一致，要不点击其他这个按钮的其他区域可能无法弹出选择文件窗口-->
<input name="myfile" type="file" onchange="postFrm(this)" style="position:relative;opacity:0;filter:alpha(opacity=0)" /><!--透明file控件-->
<div style="position:absolute;height:25px;width:150px;background:#fff;top:0px;left:0px;"></div><!--这个遮盖住file控件前面的输入框，要不即使透明了点击输入部分会显示光标-->
</div>
</form>
<script type="text/javascript">
function postFrm(fl){
document.docFrm.submit();//提交由file控件的表单
//重新设置file控件容器的innerHTML清空file控件的vlaue属性
fl.parentNode.innerHTML=fl.parentNode.innerHTML;
}
</script>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：自定义上传控件样式