自定义file类型input框样式的方法

自定义file类型input框样式的方法

在WEB上传文件时，要用到上传框：

<input type="file" id="f" name="f">

这东东在IE(其他偶没经过测试)中是一个非常特殊的对象。

如果是您手动写入的或其他对象经过某些事件触发填入的值

由于安全问题，在进行提交表单时，往往会被清空，所以上传失败。

简单点说，除非你的鼠标亲自点到了上传框f上，IE才会给你上传文件！

哪怕你将 f 的onclick句柄赋给某个对象，如：
<input type="file" id="f" name="f">
<input οnclick="f.click()" value="点击">

你 “点击” 后，同样会弹出文件选择对话框，可惜失望地：你照样不能上传文件！

怎么办呢？

看下这段：

< BODY  onmousemove ="f.style.pixelLeft=event.x-200;f.style.pixelTop=event.y-10;" >
< input  type ="text" >< input  type ="button"  onmousemove ="" >
< input  type ="file"  id ="f"  name ="f"  style ="position:absolute;" >
</ BODY >

 

随便点击鼠标，看到效果了吧？

基于上面的思路，偶们就可以把它弄到一个button下面就OK了！！

 

< style >
input{}{border:1px solid green;}
</ style >
< BODY >
< BR >< BR >< BR >
< form  method ="post"  action =""  enctype ="multipart/form-data" >
< input  type ="text"  id ="txt"  name ="txt" >
&nbsp;&nbsp; < input  type ="button"  onmousemove ="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;"  value ="请选择文件"  size ="30" >
< input  type ="file"  id ="f"  name ="f"  style ="position:absolute;"  size ="1"  onChange ="txt.value=this.value" >< BR >
< INPUT  TYPE ="submit" >
</ form >
</ BODY >

 

为了达到真正模拟的效果，还得要把f给隐藏，加个不透明的alpha 滤镜即可，再加上 hidefocus 属性，隐藏f的虚线：

 

< style >
input{}{border:1px solid green;}
</ style >
< BODY >
< BR >< BR >< BR >
< form  method ="post"  action =""  enctype ="multipart/form-data" >
< input  type ="text"  id ="txt"  name ="txt" >
&nbsp;&nbsp; < input  type ="button"  onmousemove ="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;"  value ="请选择文件"  size ="30"  onclick ="f.click()" >
< input  type ="file"  id ="f"  onchange ="txt.value=this.value"  name ="f"  style ="position:absolute;filter:alpha(opacity=0);"  size ="1"  hidefocus >< BR >
< INPUT  TYPE ="submit" >
</ form >
</ BODY >

 

可以看下opacity=0改为稍大些的效果。

OK了，现在你就可以控制它们的样式、位置了。。。

posted on 2007-06-06 09:12  阿牛－专注金融行业开发 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/rockniu/archive/2007/06/06/773047.html