美化file表单的简单小技巧

转载 2006年06月22日 15:51:00
今天看到有人在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>

相关文章推荐

javascript自动填写表单小技巧

在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作,自动提交表单,轻松且高效。 步骤 ...
  • cslie
  • cslie
  • 2015年10月08日 14:20
  • 3863

JAVA-EE表单file文件的简单应用

上传文件到服务器: 页面: 代码: 注意点1: 页面表单要加上: enctype=”multipart/form-data” web.xml 配置:要在对应的表单提交路径下 ...

【网站编程技巧】一种十分简单高效的文本表单和文件一起提交的方法

以上代码是写在页面里的一个提交word文档的表单。为了说明此表单提交的是文件数据,我们使用了 enctype="multipart/form-data" ,但是设置了此项之后,如果我们将无法同时提交...
  • TBWood
  • TBWood
  • 2013年05月09日 13:26
  • 1226

项目开发中关于type:file使用小技巧!

在日常开发当中,免不了上传文件功能,但是自带的控件形象(程序猿:我感觉很好看啊!),实在拿不太出手,但是我们又必须使用那个选择浏览文件的窗口,那怎么办呢?下面我告诉大家一个实用的小技巧。首先你得了解j...

file表单 只读 判断文件大小(javascript)

利用JQuery操作form表单,例如:text,radis,checkbox,file等等之类的

ajax提交包含file的表单

本项目基于spring mvc框架,是一个maven项目; 主要是利用FormData来提交表单; 首先在pom.xml加入依赖: org.springframework ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:美化file表单的简单小技巧
举报原因:
原因补充:

(最多只允许输入30个字)