模拟File控件上传文件

遇到了一个双语项目，跟老外解释说<input type="file" />显示的“浏览”二字是由操作系统语言决定的，不是我们可以改变的，老外就是不听坚持要替换（他们为什么不选择重装自己的操作系统换成外文版TAT）…

无奈在网上搜寻替换方法，基本上都和下面的方法1是一样的，使用一个按钮和文本框模拟File控件。可是方法1应用在ASP.NET的FileUpload上虽然可以弹出文件选择框，但是无法获取值，据说微软出于安全性考虑设置FileUpload的值不能被其他控件调用获取，必须手动点击才有效。

尝试失败继续找寻解决方案终于在茫茫知识海洋中淘到了方法2，利用CSS使file控件透明，满足了老外的需求。（当时就想着利用CSS应该可以实现，可是不会定义相关CSS，学无止境啊啊啊…）

出于通用性考虑，代码使用HTML编写。经测试以下方法PHP皆可实现，而ASP.NET（替换<input type="file" />为<asp:FileUpload />）只能实现方法2。

效果图：

 

 

HTML代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <style type="text/css">
 6 #spanUpload{
 7     font-size:18px;
 8     overflow:hidden;
 9     position:absolute
10 }
11 #fCSSUpload{
12     position:absolute;
13     z-index:100;
14     margin-left:-180px;
15     font-size:60px;
16     opacity:0;filter:alpha(opacity=0);
17     margin-top:-5px;
18 }
19 </style>
20 <title>Upload Example</title>
21 </head>
22 
23 <body>
24 <form action="" method="post" enctype="multipart/form-data">
25     <div>
26         Click button to choose file:
27     </div>
28     <div>
29         <input type="file" name="fUpload" id="fUpload" size="20" />
30     </div>
31     <br />
32     
33     <div>
34         Method 1: Click button to call file input's click event. Do like click directly:
35     </div>
36     <div>
37         <input type="file" name="fButtonUpload" id="fButtonUpload" style="display:none" onchange="document.getElementById('tButtonPath').value=this.value;" />
38         <input type="text" id="tButtonPath" size="20" />
39         <input type="button" value="Browse" onclick="document.getElementById('fButtonUpload').click();" />
40     </div>
41     <br />
42     
43     <div>
44         Method 2: Click button, indeed, to click file input which is transparent and over the button: 
45     </div>
46     <div>
47         <input type="text" id="tCSSPath" size="20" /><span id="spanUpload"><input type="file" id="fCSSUpload" name="fCSSUpload" size="1" onchange="document.getElementById('tCSSPath').value=this.value;" /><input type="button" value="Browse" /></span>
48     </div>
49     <br /><br />
50     
51     <div>
52         <input type="submit" name="Submit" value="Upload" />
53     </div>
54 </form>
55 </body>
56 </html>

 

 

posted @ 2012-09-10 02:35  浮云哥哥  阅读(506)  评论(0)    收藏  举报