美化file表单的简单小技巧

最新推荐文章于 2019-05-17 15:48:50 发布

JOHNCOOLS

最新推荐文章于 2019-05-17 15:48:50 发布

阅读量1.5k

点赞数

分类专栏： HTML JS 网页设计学习与技巧文章标签： file input button generator border javascript

HTML JS 网页设计学习与技巧专栏收录该内容

178 篇文章

订阅专栏

本文介绍了一种使用JavaScript和HTML实现文件选择对话框美化的方法。通过将文件输入框隐藏并用自定义按钮触发点击事件，同时利用文本框显示选中文件路径，实现了对默认文件选择框样式的改进。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天看到有人在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 >