file类型input方法分析及模拟实现.docVIP

input type=file 这个控件是创建文件上载用的，该控件带有一个文本框和一个浏览按钮。一般我们要涉及到这方面的开发的时候 都会用到这个控件。 ? 简单实现： 像如下代码片段，我们轻松实现了这个上传文件的页面制作 form method=post action= enctype=multipart/form-datainput type=file id=f2input type=submit name=submit/form 来点颜色： 可是，现在我们的需求多了一点改变。那个显示文件路径的文本框，我想变得特殊点，有点颜色呀什么的，那么，简单，我们来给这个控件加点style。像如下修改 ????????? input type=file style=border:1px solid blue;color:red;background:green;font:bold 12px 隶书;height:18px;width:160px 怎么样，有改变了吧。 啥，不好看，那可不是，用CSS来这个控件的外观也就只能改变这么多了，定义的样式对文本框全部生效，对于按钮，只有边框样式、字体大小和外观尺寸生效。 ? 用我们的控件来模仿上传控件： 既然这么不好使，我们就自己来创建个文本框和按钮来代替它，设置文本框控件和按钮控件可是有更多变化。 style.file{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px}/styleinput type=text class=file id=f_fileinput type=button value=上传文件 class=file onClick=t_file.click()input name=upload type=file id=t_file onchange=f_file.value=this.value style=display:none 咋样，这回可以随心所欲的设置样式了吧，连按钮文字都可以自己设置了，呵呵！ 先别高兴的太早，其实下边就是要说的问题了，咋的，咋的，弄得这么好看可是为啥提交不了？让我们来看看吧。 ? 解释模拟的控件为啥不好使： 我们把那个代码补全，另外让上传控件也显示出来就可以看的明白了 style.file{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px}/styleform method=post action= enctype=multipart/form-datainput type=text class=file id=f_fileinput type=button value=上传文件 class=file onClick=t_file.click()input name=upload type=file id=t_file onchange=f_file.value=this.valueinput type=submit/form 运行看看，呵呵，一个奇怪的现象哦，我用我伪装的按钮选择一个文件，恩，上传控件中的文本框里也显示了文件路径，可是当我点击提交按钮的时候，嘿嘿，上传控件中的文本框里的内容变空了，提交失败。 据传说是因为微软出于安全方面的考虑，只有当鼠标真正单击在上传控件的按钮上浏览到的文件才可以上传，呵呵，想想有点道理，要不我不就可以不经过你的同意随便的上传你机子上的文件了么。所以，就有了下边的解决方法。 ? 我点的就是上传控件（从网上找来的例子，我就借花献佛了）： 如果模拟的控件不行，那么我就点真正的上传控件就是了，只不过为了达到好看的目的，我把上传控件隐藏起来，随着鼠标在我那个可爱的模拟按钮上移动的时候，我就把这个控件的按钮塞到你的鼠标下边，这样子，你点击的时候其实就是真正的上传控件啦。来点代码说话： scriptfunction fclick(obj){?? with(obj){???? style.posTop=event.srcElement.offsetTop //设置透明上传框的Y坐标跟模拟按钮的Y坐标对齐???? style.posLeft=event.x-offsetWidth/2?? //设置透明上传框的X坐标为鼠标在X轴上的坐标加上它的宽的一半(确保点击时能点中透明上传框的按钮控件)，这里只是提供一种思路，其实还可以更精确的控制它的X坐标范围?? }}/scriptstyleinput{border:1px s