模拟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>