【问题】： 浏览器上传组件由一个文本输入框＋可以弹出选择文件框的按钮组成，(如图)：
【思路】：
近日在做页面时发觉有个缺陷难以解决：我想实现这样的效果，用户只能点击浏览选中文件，但是不可对已选中的文件路径或文件名进行修改（否则用户直接随意输入或修改字符串就能上传，但这样上传的是空的毫无意义的文件，所以要做一下限定），就是说这个文本输入框应该类似于disabled效果，但是对上传组件<input type="file">而言如果设置disabled则不能再上传了，所以想来想去还是通过一个变通的方法来实现这样的效果。最终思路是另外做一个独立的文本输入框设置disabled来做限制，然后把上传组件的透明度设为零，在IE和FF中测试已通过！
【代码】： <html>
<head>
<title>::Test::upload::</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="author" content="Niko">
<style type="text/css">
body,td{ font-size:12px; }
</style>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="450"><img src="UploadFile/2005-7/2005728174358491.gif" width="573" height="444" border="0"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="left">
<tr align="left" height="20">
<td width="70">选择文件：</td>
<td>
<input id="txt_file" type="text" style="width:220px;height:20px;background-color:#ffffff;border-top: #7F9DB9 1px solid;border-left: #7F9DB9 1px solid;border-bottom: #7F9DB9 1px solid;border-right: #7F9DB9 0px solid;" disabled>
</td>
<td width="240" align="left" style="background:url(UploadFile/2005-7/2005728174625830.gif) no-repeat -50px 0px !important;background:url(UploadFile/2005-7/2005728174625830.gif) no-repeat -50px 1px;">
<input name="upload" id="up_file" type="file" style="-moz-opacity:0;filter:alpha(opacity=0);height:18px;margin-left:-36px;" onchange="txt_file.value=this.value">
</td>
</tr>
<tr>
<td colspan="3" height="5"></td>
</tr>
<tr>
<td>文件描述：</td>
<td colspan="2"><input id="info_file" type="text" style="width:342px;border: #7F9DB9 1px solid;"></td>
</tr>
<tr>
<td colspan="3" height="5"></td>
</tr>
<tr>
<td><input type="submit" style="width:58px;" value=" 上 传 "></td>
<td colspan="2">提示：上传的文件大小不能超过 10.0 MB</td>
</tr>
<table>
</td>
</tr>
</table>
</form>
</body>
</html>
作者：佚名 | 文章来源：不详 | 更新时间：2007-5-4 2:13:50
|
上一篇文章： 感受Web标准，第一次DIV+CSS
下一篇文章： 对于DIV+CSS的开发方式，我们也要听听另外的声音 |
相关文章：
textbox 仿照计算器文本框改变文本框样式…
FireFox浏览器文本自动换行IE中解决方法
兼容IE6 IE7 Firefox的浏览器兼容试验…
空格的宽度--不同浏览器下测试
1024和800分辨率下浏览器宽度和宽度的设定研究
网页设计技巧:CSS实现在不同浏览器上固定定位
Dreamweaver易被忽略的问题
网站浏览器兼容的底线
为什么要建立网站标准
|
MSN :xjcncn@hotmail.com
; 
QQ：359312
;地址：新疆乌鲁木齐市友好E时代公寓B座708 邮编：830000
