今天看到有人在javascript论坛上问了一个"
如何在一个页面点击按钮弹出一个路径选择对话框"的问题,有位朋友给出了一个比较好的解决办法,可以美称为"js事件乾坤大挪移".代码如下:
的确可做一种美化file表单的巧妙方法.偶然想到的哦....
根据设想偶写的一段代码:
<
input
type
="button"
value
="Select"
onclick
="path.click()"
/>
< input type ="file" id ="path" style ="display:none;" />
这里实际上隐藏了原来的file表单,因为file表单按钮样式无法改变,这里用一个真实的按钮代替file的按钮.可以把file的click事件转移到button上.然后可以同样的模拟一个text框来代替file中的text框.然后加以美化即可.< input type ="file" id ="path" style ="display:none;" />
的确可做一种美化file表单的巧妙方法.偶然想到的哦....
根据设想偶写的一段代码:
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< META NAME ="Generator" CONTENT ="EditPlus" >
< META NAME ="Author" CONTENT ="" >
< META NAME ="Keywords" CONTENT ="" >
< META NAME ="Description" CONTENT ="" >
</ HEAD >
< BODY >
< input type ="text" size ="20" name ="upfile" id ="upfile" style ="border:1px dotted #ccc" >
< input type ="button" value ="浏览" onclick ="path.click()" style ="border:1px solid #ccc;background:#fff" >
< input type ="file" id ="path" style ="display:none" onchange ="upfile.value=this.value" >
</ BODY >
</ HTML >
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< META NAME ="Generator" CONTENT ="EditPlus" >
< META NAME ="Author" CONTENT ="" >
< META NAME ="Keywords" CONTENT ="" >
< META NAME ="Description" CONTENT ="" >
</ HEAD >
< BODY >
< input type ="text" size ="20" name ="upfile" id ="upfile" style ="border:1px dotted #ccc" >
< input type ="button" value ="浏览" onclick ="path.click()" style ="border:1px solid #ccc;background:#fff" >
< input type ="file" id ="path" style ="display:none" onchange ="upfile.value=this.value" >
</ BODY >
</ HTML >