Asp.net點擊按鈕彈出文件夾選擇框的實現（網頁） - PiaoMiaoGongZi－IT工程師數位筆記本

文章出處

本文地址：http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html

在Asp.net網站實際的開發中，比如：需要實現點擊一個類似于FileUpload的瀏覽...按鈕，彈出文件夾選擇框，然后選擇本地路徑下的某一文件夾，將該路徑值付給TextBox。參考了好多網絡資料，但是其主要實現方式是通過FileUpload，但是這種文件上傳方式去不能很好的解決該功能需求；只好尋求別的解決方法。在不斷深入的學習中，發現可以通過JS的方式來得以實現該需求。下面是詳細的實現過程，供大家參考。

解決方法1:
調用windows 的shell，但會有安全問題。
該文件定義了BrowseFolder()函數，它將提供一個文件夾選擇對話框
以供用戶實現對系統文件夾選擇的功能，文件夾選擇對話框起始目錄由
Shell.BrowseForFolder(WINDOW_HANDLE, Message, OPTIONS, strPath)函數的strPath參數設置
例如：0x11--我的電腦；0 ——桌面."c:\\"--系統C盤。
你可以創建一個browseFolder.js，然后進行調用,
用如下代碼把該函數應用到一個HTML文件中：
<script src="browseFolder.js"></script>

或者把下面代碼直接復制到<script type="text/javascript">...</script>中得...處；

注：由于瀏覽器安全方面的問題,你還需要作如下設置才能使本JS代碼正確運行,否者會出現“沒有權限”的問題。
1、設置可信任站點（例如本地的可以為：http://localhost）

2、可信任站點安全級別自定義設置中：選擇“Internet選項下——安全選項卡”，點擊“自定義級別”按鈕設置下面的選項 “對未標記為安全的ActiveX控件進行初始化和腳本運行”，將該項設置為啟用。

 1 //path 要顯示值的對象id
 2 function BrowseFolder() {
 3                 try {
 4                     var Message = "請選擇文件夾";
 5                     var Shell = new ActiveXObject("Shell.Application");
 6                     var Folder = Shell.BrowseForFolder(0, Message, 0x0040, 0x11); //起始目錄為：我的電腦
 7                     if (Folder != null) {
 8                         Folder = Folder.items(); // 返回 FolderItems 對象
 9                         Folder = Folder.item();
10                         Folder = Folder.Path; // 返回路徑
11                         if (Folder.charAt(Folder.length - 1) != "\\") {
12                             Folder = Folder + "\\";
13                         }
14                         var bb = document.getElementByIdx_x("<%=txtBackupPath.ClientID%>");     
15                         //document.getElementByIdx_x("BackupPath").value = Folder;
16                         bb.value = Folder;
17                         return Folder;
18                     }
19                 } catch (e) {
20                     alert(e.message);
21                 }
22             }

Asp.net下，TextBox和Button中的使用方法:

<asp:TextBox runat="server" ID="txtBackupPath"  Width="488px">E:\數據庫</asp:TextBox> 
<asp:Button  runat="server" Text="瀏覽..." Width="78px" OnClientClick="BrowseFolder()"/>

這種方法能很好的實現后臺對數據的處理，所以相對完美。

還有一種HTML下的使用方法：

對應的JS如下：

 1 <script type="text/javascript">
 2 
 3 function browseFolder() {
 4             try {
 5                 var Message = "\u8bf7\u9009\u62e9\u6587\u4ef6\u5939"; //選擇框提示信息
 6                 var Shell = new ActiveXObject("Shell.Application");
 7                 var Folder = Shell.BrowseForFolder(0, Message, 64, 17); //起始目錄為：我的電腦
 8                 //var Folder = Shell.BrowseForFolder(0,Message,0); //起始目錄為：桌面
 9                
10                 if (Folder != null) {
11                     Folder = Folder.items(); // 返回 FolderItems 對象
12                    
13                     Folder = Folder.item(); // 返回 Folderitem 對象
14                     Folder = Folder.Path; // 返回路徑
15                    
16                     if (Folder.charAt(Folder.length - 1) != "\\") {
17                         Folder = Folder + "\\";
18                     }
19                     document.getElementByIdx_x("pathname").value= Folder;
20                     return Folder;
21                 }
22             }
23             catch (e) {
24                 alert(e.message);
25             }
26         }
27 
28 </script>

HTML對應的文本框和按鈕的使用方法：

<input type="text" id="pathname" /></td>
<input  type="button" onclick="browseFolder()" value="瀏覽..."/></td>

這種方法的不完美的地方是后臺對文本框數據的處理比較麻煩。

2.解決方案二:
自己寫一個js讀取本地硬盤的選擇框, 缺點是外觀上較上一個差一些.

  1 <html>
  2 
  3 <head>
  4 
  5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  6 <title>無標題文檔</title>
  7 </head>
  8 <body>
  9 <table border="0" cellpadding="0" width="100%" id="tb_show">
 10 <tr>
 11 <td width="18%">文件保存位置:</td>
 12 <td width="82%">
 13 <%--<html:file property="file" size="40" styleClass="inputbox"/>--%>
 14 <input name="backDir" type="text" value ="C:\" size="100" width="500">
 15 </td>
 16 </tr>
 17 
 18 <tr>
 19 <td>目錄位置:</td>
 20 <td>
 21 <select name="tables_drive" id="tables_drives" onchange="get_drives()" ></select>
 22 </td>
 23 </tr>
 24 
 25 <tr>
 26 <td colspan="2">
 27 <select name="table_folder" id="table_folder" size="10" multiple ondblclick="get_file()"></select>
 28 </td>
 29 </tr>
 30 
 31 <tr>
 32 <td colspan="2">
 33 <font color="red">說明：雙擊列表框的一個選項，就將該文件夾下面的文件夾顯示在該列表框中。第一個就是根目錄</font>
 34 </td>
 35 </tr>
 36 </table>
 37 </body>
 38 </html>
 39 <script>
 40 
 41 window.onload = new function init()
 42 {
 43 var fso, s, n, e, x;
 44 fso = new ActiveXObject("Scripting.FileSystemObject");
 45 e = new Enumerator(fso.Drives);
 46 s = "";
 47 for (; !e.atEnd(); e.moveNext())
 48 {
 49 x = e.item();
 50 s = s + x.DriveLetter;
 51 s += ":";
 52 if (x.DriveType == 3)
 53 n = x.ShareName;
 54 else if (x.IsReady)
 55 n = x.VolumeName;
 56 else
 57 n = "[驅動器未就緒]";
 58 s += n + ",";
 59 }
 60 var drives = s.split(",");
 61 var tableDrives = document.getElementByIdx_x("tables_drives");
 62 for ( var i = 0; i < drives.length-1; i++ )
 63 {
 64 var option = document.createElement_x("OPTION");
 65 drives[i].split(":");
 66 option.value = "["+drives[i].split(":")[0]+":]"+drives[i].split(":")[1];
 67 option.text = "["+drives[i].split(":")[0]+":]"+drives[i].split(":")[1];
 68 tableDrives.add(option);
 69 }
 70 }
 71 
 72 
 73 function get_drives()
 74 {
 75 var tableDrives = document.getElementByIdx_x("tables_drives");
 76 var tableFolders = document.getElementByIdx_x("table_folder");
 77 for ( var i = 0; i < tableDrives.options.length; i++ )
 78 {
 79 if ( tableDrives.options[i].selected == true )
 80 {
 81 var fso, f, fc, s;
 82 var drive = tableDrives.options[i].value.split(":")[0].substring(1,tableDrives.options[i].value.split(":")[0].length);
 83 document.getElementByIdx_x("backDir").value = drive + ":\\";
 84 fso = new ActiveXObject("Scripting.FileSystemObject");
 85 if (fso.DriveExists(drive))
 86 {
 87 d = fso.GetDrive(drive);
 88 if ( d.IsReady )
 89 {
 90 f = fso.GetFolder(d.RootFolder);
 91 fc = new Enumerator(f.SubFolders);
 92 s = "";
 93 for (; !fc.atEnd(); fc.moveNext())
 94 {
 95 s += fc.item();
 96 s += ",";
 97 }
 98 
 99 var len = tableFolders.options.length;
100 while(len >= 0)
101 {
102 tableFolders.options.remove(len);
103 len--;
104 }
105 var option = document.createElement_x("OPTION");
106 option.value = drive + ":\\";
107 option.text = drive + ":\\";
108 tableFolders.add(option);
109 var folders = s.split(",");
110 for ( j = 0; j < folders.length -1; j++)
111 {
112 option = document.createElement_x("OPTION");
113 option.value = folders[j];
114 option.text = folders[j];
115 tableFolders.add(option);
116 }
117 }
118 else
119 {
120 alert("無法改變當前內容！")
121 }
122 }
123 else
124 return false;
125 }
126 }
127 }
128 
129 
130 function get_file()
131 {
132 var tableFolders = document.getElementByIdx_x("table_folder");
133 var tableDrives = document.getElementByIdx_x("tables_drives");
134 for ( var i = 0; i < tableFolders.options.length; i++ )
135 {
136 if ( tableFolders.options[i].selected == true )
137 {
138 var fso, f, fc, s;
139 var folderpath = tableFolders.options[i].value.substring(0,tableFolders.options[i].value.length);
140 if ( folderpath.charAt(folderpath.length-1) == "\\" )
141 {
142 document.getElementByIdx_x("backDir").value = folderpath;
143 }
144 else
145 {
146 document.getElementByIdx_x("backDir").value = folderpath + "\\";
147 }
148 
149 
150 fso = new ActiveXObject("Scripting.FileSystemObject");
151 f = fso.GetFolder(folderpath);
152 fc = new Enumerator(f.SubFolders);
153 s = "";
154 for (; !fc.atEnd(); fc.moveNext())
155 {
156 s += fc.item();
157 s += ",";
158 }
159 var len = tableFolders.options.length;
160 while(len >= 0)
161 {
162 tableFolders.options.remove(len);
163 len--;
164 }
165 var opt = "";
166 var opt1 = "";
167 for ( j = 0; j < folderpath.split("\\").length; j++ )
168 {
169 var option = document.createElement_x("OPTION");
170 opt = opt + folderpath.split("\\")[j]+"\\";
171 if ( j > 0)
172 {
173 opt1 = opt;
174 option.value = opt1.substring(0,opt1.length-1);
175 option.text = opt1.substring(0,opt1.length-1);
176 tableFolders.add(option);
177 }
178 else
179 {
180 option.value = opt;
181 option.text = opt;
182 tableFolders.add(option);
183 }
184 
185 }
186 if ( tableFolders.options[0].value == tableFolders.options[1].value )
187 {
188 tableFolders.options.remove(1);
189 }
190 if ( s != "" )
191 {
192 var folders = s.split(",");
193 for ( j = 0; j < folders.length -1; j++)
194 {
195 option = document.createElement_x("OPTION");
196 option.value = folders[j];
197 option.text = folders[j];
198 tableFolders.add(option);
199 }
200 }
201 }
202 }
203 }
204 </script>