收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 58189|回复: 22

[初级教程]更改文件上传框的样式

 关闭 [复制链接]
发表于 2003-10-22 14:05:00 | 显示全部楼层 |阅读模式
先测试一下下面的代码看看:

 提示:您可以先修改部分代码再运行



可以看到,上传框带有两个控件:一个文本框和一个按钮。定义的样式对文本框全部生效,对于按钮,只有边框样式、字体大小和外观尺寸生效。看来直接用CSS定义它的外观是行不通的。

我们知道,大部分控件都有一个单击(click)事件句柄,上传框在单击"浏览..."按钮时会弹出"选择文件"对话框,如果我们自己模拟一个上传框:一个文本框(<input type="text">)和一个按钮(<input type="button">或<button>Text</button>),在单击自定义按钮时同时触发上传框的click事件让它弹出"选择文件"对话框... ...于是有:

 提示:您可以先修改部分代码再运行




在点击"上传文件"按钮时执行t_file.click(),当上传框的值有所改变时通过onchange事件句柄执行f_file.value=this.value,即保持真正的上传框与模拟的上传框的值同步更新,style="display:none"让真正的上传框隐藏,使模拟的文件上传框能以假乱真------问题似乎解决了,不过,把代码放到表单中测试一下看看:

 提示:您可以先修改部分代码再运行




点击"上传文件"按钮后再提交表单,可以看到,真正的上传框的内容被清空了,意思就是说,这样模拟出来的上传框没有任何意义,因为没办法上传文件(记得上期《电脑》报上有关于这个的文章,我想作者肯定没放到表单中测试过)。
之所以是这个结果,估计是因为微软出于安全方面的考虑,只有当鼠标真正单击在上传控件的按钮上浏览到的文件才可以上传(否则,只要你进入我的页面,我就可以随心所欲的得到你的私密文件)。看来此路又是不通,不过不要丧气,运行一下下面的代码看看:

 提示:您可以先修改部分代码再运行



直接看代码一时可能还明白不过来,可以把上传框的透明度增加到百分之三十再看看效果(或者看这里的讨论:http://bbs.blueidea.com/viewthread.php?tid=1118701):

 提示:您可以先修改部分代码再运行




提示:要更精确的控制透明上传框的X坐标,可把脚本部分修改一下:

 提示:您可以先修改部分代码再运行



P.S:0_0第一次写教程,有些解释可能不规范,不过有砖头就快扔,最好是拣金砖扔来,砸死也值
发表于 2003-10-22 15:44:00 | 显示全部楼层
不错……
一直想修改上传里的“浏览”的字样
根据IE的默认语言不是太方便

这个教程正好用上
回复 支持 反对

使用道具 举报

发表于 2003-10-22 15:55:00 | 显示全部楼层

发表论坛

我该如何发表论坛,我没有看到这个功能呀,我只能做回复,我希望你可以答复我!
回复 支持 反对

使用道具 举报

发表于 2003-10-22 18:28:00 | 显示全部楼层
hao !
回复 支持 反对

使用道具 举报

发表于 2003-10-23 08:32:00 | 显示全部楼层
我上次在电脑报上也看到了这文章,总觉得有问题,呵呵

按文章的方法应该能自动上传文件,可是想想不可能啊,原来他真的是有错误的,这篇文章还被《计算机应用文摘》转载过。我一开始还兴奋了好一阵子呢
回复 支持 反对

使用道具 举报

发表于 2003-10-25 16:02:00 | 显示全部楼层
是不是要有动态网页支持才可以真正地把文件上传上去??
回复 支持 反对

使用道具 举报

发表于 2003-10-26 14:46:00 | 显示全部楼层


谢天谢地

我终于找到了

太谢谢楼主了````````
回复 支持 反对

使用道具 举报

 楼主| 发表于 2003-10-26 19:12:00 | 显示全部楼层
tao924934在上个帖子中说
是不是要有动态网页支持才可以真正地把文件上传上去??


这不是问题所在
回复 支持 反对

使用道具 举报

发表于 2003-10-28 08:35:00 | 显示全部楼层
最后一个脚本执行有点问题
重影
不过
好东西一定要顶
回复 支持 反对

使用道具 举报

发表于 2003-10-30 17:11:00 | 显示全部楼层
有个fire人在上个帖子中说
最后一个脚本执行有点问题
重影


的确有这个问题呢..
回复 支持 反对

使用道具 举报

 楼主| 发表于 2003-10-30 18:10:00 | 显示全部楼层
是为了让你们看清楚一点,把上传控件的透明度设为30%了
<input name="upload" type="file" style="position:absolute;filter:alpha(opacity=30);width:30px;" id="t_file" onchange="f_file.value=this.value" hidefocus>
回复 支持 反对

使用道具 举报

发表于 2003-10-30 21:30:00 | 显示全部楼层
楼上高人,请问SELECT框能否改呀,它的属性在CSS里是哪一项呀!
回复 支持 反对

使用道具 举报

发表于 2003-10-31 00:54:00 | 显示全部楼层
我佛山人在上个帖子中说
  
点击"上传文件"按钮后再提交表单,可以看到,真正的上传框的内容被清空了,意思就是说,这样模拟出来的上传框没有任何意义,因为没办法上传文件。
  

不是很明白你句话的含义。

  1. <input type="submit" onclick="f_file.value=''">
复制代码

加个事件让文本框在提交的时候清空应该是可以的。看下面的代码。
不过能不能上传就不清楚了。因为看不到你上传的代码。


 提示:您可以先修改部分代码再运行



回复 支持 反对

使用道具 举报

发表于 2003-10-31 08:41:00 | 显示全部楼层
你点了提交按钮就知道了,file框的内容会自动清空
回复 支持 反对

使用道具 举报

发表于 2003-10-31 11:31:00 | 显示全部楼层
我还是不明白他和你的意思。
点了提交按钮,file框的内容会自动清空
这跟上传有什么关系
回复 支持 反对

使用道具 举报

发表于 2003-10-31 14:00:00 | 显示全部楼层
清空了就不能上传了
回复 支持 反对

使用道具 举报

发表于 2004-7-17 09:56:00 | 显示全部楼层
不错不错,都是高手啊
回复 支持 反对

使用道具 举报

发表于 2004-12-14 10:33:00 | 显示全部楼层
好东西~
回复 支持 反对

使用道具 举报

发表于 2005-2-12 14:40:00 | 显示全部楼层
那这样一来是不是上传都要靠组件了?
回复 支持 反对

使用道具 举报

发表于 2005-2-12 14:48:00 | 显示全部楼层
只是对文件上传框的样式做了修饰,但不能真正上传,即不能真正打开本地文件。
回复 支持 反对

使用道具 举报

发表于 2005-3-30 17:21:00 | 显示全部楼层
引用:
--------------------------------------------------------------------------------

点击"上传文件"按钮后再提交表单,可以看到,真正的上传框的内容被清空了,意思就是说,这样模拟出来的上传框没有任何意义,因为没办法上传文件。

--------------------------------------------------------------------------------
我也有這問題,請問在不用點擊瀏覽按扭和在file里寫入文件路徑的情況下,怎么模拟上傳?
回复 支持 反对

使用道具 举报

发表于 2005-11-16 21:22:00 | 显示全部楼层
不知道个算不算老贴!
我想问的是。能不能把“浏览”两个字改了?
我想写英文版的时候,用”浏览“没有“view”来的好吧?
回复 支持 反对

使用道具 举报

发表于 2005-11-16 21:49:00 | 显示全部楼层
应该强调过很多次了,不要顶老帖,对老帖有疑问,就开新帖,然后给个链接到老帖。

关于你的的问题,英文的操作系统自然会显示英文的browse
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-4-6 02:52 , Processed in 0.153908 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表