A JavaScript Fancier

伟大的javascript技术研究中...

  IT博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  304 随笔 :: 0 文章 :: 479 评论 :: 0 Trackbacks


今天看到有人在javascript论坛上问了一个"如何在一个页面点击按钮弹出一个路径选择对话框"的问题,有位朋友给出了一个比较好的解决办法,可以美称为"js事件乾坤大挪移".代码如下:
<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框.然后加以美化即可.
的确可做一种美化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>

posted on 2006-06-19 00:00 Yemoo'S JS Blog 阅读(1004) 评论(5)  编辑 收藏 引用 所属分类: javascript技巧总结

评论

# re: 美化file表单的简单小技巧 2008-01-30 14:53 Whim
不过这种方法不支持firefox。  回复  更多评论
  

# re: 美化file表单的简单小技巧[未登录] 2008-08-19 11:35 Jeff
选择文件一般是用在上传文件的, 但用这种方法是可以选择文件,但单击上传按钮时, 不起作用了。  回复  更多评论
  

# re: 美化file表单的简单小技巧 2008-09-08 13:39 maxin
不支持提交  回复  更多评论
  

# re: 美化file表单的简单小技巧 2009-01-08 13:06 heidou
不支持提交 提交file会清空  回复  更多评论
  

# re: 美化file表单的简单小技巧 2009-05-02 10:43 null
而更重要的是无法用dwr来访问那个file的值...  回复  更多评论
  

只有注册用户登录后才能发表评论。