已经很久没用javascript做页面了，这天突然有朋友问我关于FileUpload的赋值问题，由于FileUpload经过编译后，最后生 成<input type="file"/>标签。而在 HTML 文档中 ，<input type="file"/> 标签是浏览器向服务器发送选中文件的。该元素有一个 value 属性，保存了用户指定的文件的名称，为安全起见，file标签的value 属性是只读的，不允许程序员修改它的值，并且HTML value 属性也会被忽略。所以，当数据库记录下文件在客户端的地址，需要为file标签的value属性赋值时，就会出现问题。

经过多翻查询，最后在下决定使用“隐藏标签”的方法来实现这些功能。首先在页面添加一个text标签，一个button标签，一个file标签，并 把file标签的sytle属性设置为“visibility:hidden;”  把text标签和button标签模拟file的外观。在window. 标签的onclick方法中引发file标签的click事件，获取上传文件，最后把上传文件的路径显示在text标签之上。

 
  
     
   
  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
    2.  
   
  2. <head runat="server"> 
    3.  
   
  3.     <title></title> 
    4.  
   
  4.     <script type="text/javascript"> 
    5.  
   
  5.         window.onload = function () { 
    6.  
   
  6.             //为text标签赋值显示已经有的文件路径 
    7.  
   
  7.             document.getElementById("text1").value = "F://My Documents/File.txt"; 
    8.  
   
  8.         } 
    9.  
   
  9.  
    10.  
   
  10.         function btn1_onclick() { 
    11.  
   
  11.             var file = document.getElementById('file1') 
    12.  
   
  12.             file.click(); 
    13.  
   
  13.             document.getElementById("text1").value = file.value;//显示新文件路径 
    14.  
   
  14.              ....... 
    15.  
   
  15.         } 
    16.  
   
  16.     </script> 
    17.  
   
  17. </head> 
    18.  
   
  18. <body> 
    19.  
   
  19.     <form id="form1" runat="server"> 
    20.  
   
  20.     <div> 
    21.  
   
  21.         <input type="text" id="text1" /> 
    22.  
   
  22.         <input type="button" id="btn1" onclick="btn1_onclick()" style="width:60px" value="浏览" /> 
    23.  
   
  23.         <input type="file" id="file1" style="visibility:hidden;"  /> 
    24.  
   
  24.     </div> 
    25.  
   
  25.     </form> 
    26.  
   
  26. </body> 
    27.  
   
  27. </html> 
    28.  
  
 
  
 
   
但要注意的一点是，使用以上方法，只适用于为file标签的name属性赋值，但无法直接获取file的上传文件。这是因为安全性的原因，浏览器会 阻止直接通过程序对file标签绑定上传文件。如果想通过“隐藏标签”的方式直接上传文件，那还得花一点小工夫。首先建立一个file标签，然后加入一个 text标签把file的文本部分覆盖，最后在file的onchange事件中为text标签赋值。
 
   
 
   
     
    
  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
    2.  
    
  2. <head runat="server"> 
    3.  
    
  3.     <title></title> 
    4.  
    
  4.     <script type="text/javascript"> 
    5.  
    
  5.         window.onload = function () { 
    6.  
    
  6.             //为text赋值显示已经有的文件路径 
    7.  
    
  7.             document.getElementById("text1").value = "F://My Documents/File.txt"; 
    8.  
    
  8.         } 
    9.  
    
  9.  
    10.  
    
  10.         //在file赋值时，让text标签同步更新 
    11.  
    
  11.         function file1_onchange() { 
    12.  
    
  12.             document.getElementById("text1").value = document.getElementById("file1").value; 
    13.  
    
  13.         } 
    14.  
    
  14.     </script> 
    15.  
    
  15.  
    16.  
    
  16.     <script type="text/C#" runat="server"> 
    17.  
    
  17.         //获取上传文件 
    18.  
    
  18.         protected void Page_Load(object sender, EventArgs e) 
    19.  
    
  19.         { 
    20.  
    
  20.            if (HttpContext.Current.Request.Files.Count != 0) 
    21.  
    
  21.            { 
    22.  
    
  22.               HttpPostedFile file = HttpContext.Current.Request.Files[0]; 
    23.  
    
  23.               string filefileName = file.FileName; 
    24.  
    
  24.               System.IO.Stream stream=file.InputStream; 
    25.  
    
  25.               byte[] byteData = new byte[stream.Length]; 
    26.  
    
  26.               int length = stream.Read(byteData, 0, (int)stream.Length); 
    27.  
    
  27.               string data = System.Text.Encoding.Default.GetString(byteData);       
    28.  
    
  28.               ........... 
    29.  
    
  29.            } 
    30.  
    
  30.         } 
    31.  
    
  31.     </script> 
    32.  
    
  32. </head> 
    33.  
    
  33. <body> 
    34.  
    
  34.     <form id="form1" method="post" enctype="multipart/form-data" action="Default.aspx"> 
    35.  
    
  35.     <div style="position:relative;height:24px;"> 
    36.  
    
  36.           <!--设置style属性，使text标签把file标签的文本部分覆盖--> 
    37.  
    
  37.          <div style="position:absolute;left:0;top:2px;"> 
    38.  
    
  38.               <input type="text" id="text1"/> 
    39.  
    
  39.          </div> 
    40.  
    
  40.          <input type="file" id="file1" name="file1" onchange="file1_onchange()"/> 
    41.  
    
  41.          <input type="submit" /> 
    42.  
    
  42.     </div> 
    43.  
    
  43.     </form> 
    44.  
    
  44. </body> 
    45.  
    
  45. </html> 
    46.