html中upload控件的模拟上传
说起上传就不得不谈到文件上传控件:
<input type="file" name="t_file">
然而这个上传控件是一个文本框和一个按钮，这个按钮的样式和目前所做的项目中的风格基本是不一致的。于是想打算用一个文本框和一个图片按钮来模仿上传功能。
在上网查找相关资料，得到下面一些信息：
我们知道，大部分控件都有一个单击(Click)事件句柄，上传框在点击”浏览”文件对话框，如果我们自己模拟一个上传框,和一个按钮，在单击自定义按钮时候同事触发上传框的Click事件让它弹出文件对话框：
<input type=”text” id=”f_file”/>
<img src=”” onClick=”t_file.Click()”>
<input type=”file” name=”upload” id=”t_file” onchange=”f_file.value=this.value” style=”display:none;”/>在点击上传按钮时候执行 t_file.Click()当上传框的值有所改变时候通过onchange事件执行f_file.value=this.value，即保持真正的上传框和模拟的上传框的值同步更新，style=”display:none”,让真正的上传框隐藏，使模拟的文件上传框能以假乱真。
然而当该代码放在表单中时候，点击提交表单时候，真正的上传框的内容被清空了。意思就是说，这样模拟出来的上传框没有任何意义的。因为没有办法上传文件。之所以是这样的结果，估计是因为微软处于安全方面的考虑。只有当鼠标真正上传在上传控件的按钮上浏览到的文件才可以看到（否则你进入我的页面，我就可以随心所欲的得到你的私密文件）.
经过认真的查找和求教，最后寻得一妙方，将upload控件放在a标签中，同过css样式将upload的透明度设置为0，继而实现了理想中的效果。html源码如下：
<html>
<head>
<title>test</title>
<style>
a.files {
width:90px;
height:30px;
overflow:hidden;
display:block;
border:1px solid #BEBEBE;
background:url(img/fu_btn.gif) left top no-repeat;
text-decoration:none;
}
a.files:hover {
background-color:#FFFFEE;
background-position:0 -30px;
}
/*file设为透明，并覆盖整个触发面*/
a.files input {
margin-left:-350px;
font-size:30px;
cursor:pointer;
filter:alpha(opacity=0);
opacity:0;
}
/*取消点击时的虚线框*/
a.files, a.files input {
outline:none;/*ff*/
hide-focus:expression(this.hideFocus=true);/*ie*/
}
</style>
<script type="text/javascript">
window.onload= addfile;
function addfile(){
var file = document.createElement("input");
file.name = "filename";
file.type = "file";
document.getElementById("idFile").appendChild(file);
}
function hrefclick()
{
return false;
}
</script>
</head>
<body>
<a href="javascript:void(0);" class="files" id="idFile"></a>sa
</body>
</html>
