仿163网盘无刷新文件上传系统

核心提示： 但当自己尝试修改file控件的样式时，发现单单设置file控件的样式并不能实现想要的效果，仿163网盘无刷新文件上传系统(9)，于是我想了另一个办法，用一个button来模拟，我使用了有伪类hover的a元素（虽然CSS2中hover可以应用于任何对象，但ie6不支持），结果发现也不行，用

但当自己尝试修改file控件的样式时，发现单单设置file控件的样式并不能实现想要的效果。

于是我想了另一个办法，用一个button来模拟，结果发现也不行，用js根本操作不了file控件，应该是考虑到安全问题吧。

最后是参考了163网盘和muxrwc模拟126附件添加的效果，总结了这个方法：

1.指定用一个容器（例如程序中的idFile）。

容器最好指定高和宽，并且overflow为hidden，不是块级元素的最好设display为block（为了高和宽的正确呈现）；

2.在容器里放一个file控件，并设置样式，使能触发弹出选择文件框的部分覆盖整个容器，并设置成全透明。

容器指定准确的高和宽就是为了能通过file控件中不多的能设置的样式来覆盖整个容器；

3.现在已经把容器模拟成file控件了，可以直接设置容器的样式来模拟设置file控件的样式了。

在程序中主要用file控件的margin-left和font-size来实现覆盖整个容器：

Code

a.files input {
　　margin-left:-350px;
　　font-size:30px;
　　cursor:pointer;
　　filter:alpha(opacity=0);
　　opacity:0;
}

至于容器，我使用了有伪类hover的a元素（虽然CSS2中hover可以应用于任何对象，但ie6不支持）。

这里用了一个常用的小技巧，就是用一张图片作为背景通过在hover时修改background-position来实现两张图片的效果：

Code

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;
}