风之语

posts(201) comments(182) trackbacks(1)
  • BlogJava
  • 联系
  • RSS 2.0 Feed 聚合
  • 管理

常用链接

  • 我的随笔
  • 我的评论
  • 我的参与
  • 最新评论

留言簿

  • 给我留言
  • 查看公开留言
  • 查看私人留言

随笔分类

  • ajax(1)
  • android(1)
  • apache(1)
  • AppFuse(1)
  • BIRT(1)
  • iText(1)
  • JSF(8)
  • kettle(1)
  • linux(5)
  • mac(1)
  • maven(1)
  • MSTR(3)
  • Open XML(1)
  • Oracle(21)
  • RCP
  • Struts(2)
  • Struts2(2)
  • SybaseIQ(6)
  • tapestry
  • tomcat(2)
  • weblogic(1)
  • webservice(1)
  • weka(1)
  • 云计算(1)
  • 收藏(31)
  • 数据仓库(11)
  • 架构设计(3)
  • 生活(2)
  • 集群(1)
  • 项目管理(6)

随笔档案

  • 2012年12月 (4)
  • 2012年11月 (1)
  • 2012年7月 (2)
  • 2011年8月 (1)
  • 2011年7月 (1)
  • 2011年3月 (1)
  • 2010年12月 (2)
  • 2010年11月 (4)
  • 2010年10月 (3)
  • 2010年9月 (5)
  • 2010年8月 (1)
  • 2010年7月 (4)
  • 2010年3月 (1)
  • 2010年2月 (3)
  • 2009年12月 (3)
  • 2009年11月 (4)
  • 2009年9月 (3)
  • 2009年6月 (5)
  • 2009年5月 (3)
  • 2009年4月 (2)
  • 2009年3月 (5)
  • 2009年2月 (4)
  • 2009年1月 (2)
  • 2008年11月 (2)
  • 2008年9月 (1)
  • 2008年7月 (2)
  • 2008年6月 (4)
  • 2008年5月 (6)
  • 2008年4月 (1)
  • 2008年3月 (1)
  • 2007年12月 (2)
  • 2007年11月 (5)
  • 2007年10月 (2)
  • 2007年9月 (3)
  • 2007年8月 (3)
  • 2007年4月 (1)
  • 2007年3月 (2)
  • 2007年2月 (2)
  • 2007年1月 (2)
  • 2006年12月 (3)
  • 2006年8月 (2)
  • 2006年7月 (2)
  • 2006年6月 (2)
  • 2006年4月 (2)
  • 2006年3月 (1)
  • 2006年2月 (3)
  • 2006年1月 (6)
  • 2005年12月 (6)
  • 2005年11月 (4)
  • 2005年10月 (17)
  • 2005年9月 (25)
  • 2005年8月 (16)
  • 2005年7月 (8)

相册

  • 技术图片

收藏夹

  • java

link

My wife

  • My wife's blog

最新随笔

  • 1. apache修改最大连接并用ab网站压力测试
  • 2. Vm虚拟机访问本地硬盘文件
  • 3. NFS文件无法写入的权限问题
  • 4. weblogic设置上传文件访问权限
  • 5. 在android上动态实现ichartjs的3D柱形图
  • 6. 使用Oracle trunc 来指定精确的年月日时分秒
  • 7. Quartz 2.1.5 web应用配置
  • 8. LoginAny 使用笔记
  • 9. MyEclipse 无响应的几种解决办法
  • 10. java.sql.SQLException: No more data to read from socket

搜索

  •  

积分与排名

  • 积分 - 402883
  • 排名 - 139

最新评论

  • 1. re: 使用Oracle trunc 来指定精确的年月日时分秒[未登录]
  • 政治
  • --张三
  • 2. re: 干掉流氓软件vrvrf_c.exe,vrvedp_m.exe[未登录]
  • `
  • --1
  • 3. re: 无需刻录DMG光盘,教你在VMWare下安装MAC OS X Snow Leopard 10.6
  • 我走到了换DMG映像的时候,然后就没有反应了,这个是什么情况,是不是我的映像文件有问题,还是。。。。
  • --玉竹常青
  • 4. re: LoginAny 使用笔记
  • 怎么没一个人留言,现在来是不是在挖坟啊
  • --ellipse
  • 5. MSTR web应用的部署[未登录]
  • 请问,如何用oracle Application Server服务器部署mstr web应用?
  • --rocky

阅读排行榜

评论排行榜

View Post

自定义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 onclick="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-09-10 18:31 风 阅读(885) 评论(1)  编辑  收藏 所属分类: 收藏

View Comments

# re: 自定义file类型input框样式的方法   回复  更多评论   
只能在IE里用啊
2007-09-12 15:56 | guest
新用户注册  刷新评论列表  

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


网站导航:
博客园   IT新闻   Chat2DB   C++博客   博问   管理
相关文章:
  • LoginAny 使用笔记
  • 资源管理器搜索包含文字的文件找不到的解决方法
  • xp下删除windows7,无法删除windows7文件夹,无法删除windows7文件,双系统卸载,取得文件权限
  • 利用windows系统ftp命令编写的BAT文件上传[转]
  • jxl操作excel例子(转)
  • I18N-国际化消息和日志
  • 使用 AppFuse 的七个理由
  • Office (2007) Open XML 文件格式简介
  • [转]Reporting Services与相关产品的比较
  • 自定义file类型input框样式的方法
 
 
Powered by:
BlogJava
Copyright © 风