上传表单的样式模拟
最近因为工作需要，不得不再次面对修改上传表单的样式。想当年也曾经遇到过，但当初因为改不了样式，而上级领导又说改不了就默认好了，就没再理了。
这次的工作环境不一样了，领导也不一样了，领导直接抛给我个网址，说参考这上面的做法，模拟一个出来就可以了。
木有办法，硬着头皮研究了。
不逼不知道，原来这个并不难，其实就是将一个text放在file的下面，然后让file看不到，我们看到的事实上就是text，而真正点击到的却是file。原理就是这样，具体怎样去实现就看个人了。
有人估计是为了结构上的美观，而用JS去动态生成text，而我按自己上面的理解，则直接将file定位到text上面，个人觉得简单一点。具体直接下面代码。
<!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=gb2312" />
<title></title>
<script type="text/javascript">
window.onload = function(){
var _file = document.getElementById('upload-file');
var _text = document.getElementById('upload-text');
_file.onchange = function(){
_text.value = _file.value; /*大家都懂，勿需解释*/
}
}
</script>
<style type="text/css">
*{ margin:0; padding:0;}
body{ padding:20px;}
.upload-form{ position:relative;}
.upload-file{ position:absolute; top:3px; left:0; filter:alpha(opacity:0); opacity:0;} /*后面两个属性是关键，将file表单透明化*/
.upload-text{ width:220px; height:28px; line-height:28px;}
.upload-sub{ width:60px; height:28px; line-height:28px;}
</style>
</head>
<body>
<form class="upload-form">
<input type="file" class="upload-file" size="31" id="upload-file" /> <!--真正的上传表单-->
<input type="text" class="upload-text" id="upload-text" /> <!--准备做假用的-->
<input type="submit" value="浏览..." class="upload-sub" />
</form>
</body>
</html>
注：太久没更新博客了，发现自己的运行脚本造成了某些系统显示错误，所以给博客园禁了，也就是说不能放可运行代码了，所以直接这样放出代码，其实这样也挺好的，省去我很多时间。时间确实不多啊。
/*************************************************** 2014-06-27 华丽丽更新 ************************************************/
如上，是很久前写的一个上传表单样式美化，一直以来我都是这么用的，最近发现一种更简单并且不需要JS的方法，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
#upload{width: 0px; height: 0px; font-size: 0px; line-height: 0px;}
</style>
</head>
<body>
<label class="btn-upload" for="upload">本地上传</label>
<input type="file" id="upload">
</body>
</html>
将file隐藏，但不能display:none或visibility:hidden，然后用label的for属性指向它，就可以了，赞。
