【问题】: 浏览器上传组件由一个文本输入框+可以弹出选择文件框的按钮组成,(如图):
【思路】:
近日在做页面时发觉有个缺陷难以解决:我想实现这样的效果,用户只能点击浏览选中文件,但是不可对已选中的文件路径或文件名进行修改(否则用户直接随意输入或修改字符串就能上传,但这样上传的是空的毫无意义的文件,所以要做一下限定),就是说这个文本输入框应该类似于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>
|