html5 文件上传控制类型 html文件上传框

今同事问了个关于触发input

type=file控件的问题，当时看似简单可是一下子又没搞定，百思不得其解，回来试了一下，终于找到问题，赶紧整理篇文章说道说道。其实很简单，哈哈！

这个控件是创建文件上载用的，该控件带有一个文本框和一个浏览按钮。一般我们要涉及到这方面的开发的时候

都会用到这个控件。

简单实现：

像如下代码片段，我们轻松实现了这个上传文件的页面制作

enctype="multipart/form-data">

来点颜色：

可是，现在我们的需求多了一点改变。那个显示文件路径的文本框，我想变得特殊点，有点颜色呀什么的，那么，简单，我们来给这个控件加点style。像如下修改

怎么样，有改变了吧。

啥，不好看，那可不是，用CSS来这个控件的外观也就只能改变这么多了，定义的样式对文本框全部生效，对于按钮，只有边框样式、字体大小和外观尺寸生效。

用我们的控件来模仿上传控件：

既然这么不好使，我们就自己来创建个文本框和按钮来代替它，设置文本框控件和按钮控件可是有更多变化。

.file{border:1px solid
#333333;color:#666666;background:#eeeeee;font:normal 12px
Tahoma;height:18px}
type="button" value="上传文件" class="file"
onClick="t_file.click()">
οnchange="f_file.value=this.value" style="display:none">

咋样，这回可以随心所欲的设置样式了吧，连按钮文字都可以自己设置了，呵呵！

先别高兴的太早，其实下边就是要说的问题了，咋的，咋的，弄得这么好看可是为啥提交不了？让我们来看看吧。

解释模拟的控件为啥不好使：

我们把那个代码补全，另外让

上传控件也显示出来就可以看的明白了

.file{border:1px solid
#333333;color:#666666;background:#eeeeee;font:normal 12px
Tahoma;height:18px}
enctype="multipart/form-data">
id="f_file">
class="file" onClick="t_file.click()">
οnchange="f_file.value=this.value">

运行看看，呵呵，一个奇怪的现象哦，我用我伪装的按钮选择一个文件，恩，上传控件中的文本框里也显示了文件路径，可是当我点击提交按钮的时候，嘿嘿，上传控件中的文本框里的内容变空了，提交失败。

据传说是因为微软出于安全方面的考虑，只有当鼠标真正单击在上传控件的按钮上浏览到的文件才可以上传，呵呵，想想有点道理，要不我不就可以不经过你的同意随便的上传你机子上的文件了么。所以，就有了下边的解决方法。

我点的就是上传控件(从网上找来的例子，我就借花献佛了)：

如果模拟的控件不行，那么我就点真正的上传控件就是了，只不过为了达到好看的目的，我把上传控件隐藏起来，随着鼠标在我那个可爱的模拟按钮上移动的时候，我就把这个控件的按钮塞到你的鼠标下边，这样子，你点击的时候其实就是真正的上传控件啦。来点代码说话：

function fclick(obj){
with(obj){
style.posTop=event.srcElement.offsetTop //设置透明上传框的Y坐标跟模拟按钮的Y坐标对齐
style.posLeft=event.x-offsetWidth/2 //设置透明上传框的X坐标为鼠标在X轴上的坐标加上它的宽的一半(确保点击时能点中透明上传框的按钮控件)，这里只是提供一种思路，其实还可以更精确的控制它的X坐标范围

}
}
input{border:1px solid
#333333;color:#666666;background:#eeeeee;font:normal 12px
Tahoma;height:18px}
enctype="multipart/form-data">
οnmοuseοver="fclick(t_file)" value="选择上传文件">
style="position:absolute;filter:alpha(opacity=0);width:30px;"
id="t_file" οnchange="f_file.value=this.value" hidefocus>
咋的，没看明白？简单，我把那个隐藏的上传控件给你显示点影子，你就明白了
function fclick(obj){
with(obj){
style.posTop=event.srcElement.offsetTop
style.posLeft=event.x-offsetWidth/2
}
}
input{border:1px solid
#333333;color:#666666;background:#eeeeee;font:normal 12px
Tahoma;height:18px}
enctype="multipart/form-data">
οnmοuseοver="fclick(t_file)" value="选择上传文件">
style="position:absolute;filter:alpha(opacity=30);width:30px;"
id="t_file" οnchange="f_file.value=this.value" hidefocus>
呵呵，还要求准确点，要求还真高，好，我再改改脚本！
function fclick(obj){
with(obj){
style.posTop=event.srcElement.offsetTop
var
x=event.x-offsetWidth/2
if(x
if(x>event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth)x=event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth
style.posLeft=x
}
}
input{border:1px solid
#333333;color:#666666;background:#eeeeee;font:normal 12px
Tahoma;height:18px}
enctype="multipart/form-data">
οnmοuseοver="fclick(t_file)" value="选择上传文件">
style="position:absolute;filter:alpha(opacity=30);width:30px;"
id="t_file" οnchange="f_file.value=this.value" hidefocus>