JS+ACTIVEX實現(xiàn)網頁選擇本地目錄路徑對話框

更新時間：2013年03月18日 16:52:00 作者：

使用ACTIVEX對象遍歷本地磁盤和目錄,只需網頁啟用相關ACTIVEX的INTERNET選項即可實現(xiàn)路徑選擇對話框，感興趣的你可以參考下哈希望可以幫助到你

網頁選擇本地目錄路徑對話框，使用ACTIVEX對象遍歷本地磁盤和目錄，只需網頁啟用相關ACTIVEX的INTERNET選項，對本地瀏覽器的安全性要求不高，簡單易用。

網頁選擇本地目錄路徑對話框樣例

1.打開主頁面"select.html"，點擊“選擇路徑”按鈕進入路徑選擇頁面“dir.html”，選取本地目錄路徑

2.路徑選擇頁面“dir.html”初始化后，加載本地磁盤驅動，然后根據選擇的磁盤路徑加載其中的目錄。如目錄中存在子目錄，雙擊該目錄列表項進入下一集目錄。

3.點擊“確定”，關閉選擇路徑頁面"dir.html"，將選擇的路徑值返回到主頁面"select.html"文本框上

/**//* 
*初始化，將系統(tǒng)所有的驅動器放入table_drives列表 
*/ 
window.onload = new function init() 
{ 
var fso, s, n, e, x; 
fso = new ActiveXObject("Scripting.FileSystemObject"); 
e = new Enumerator(fso.Drives); 
s = ""; 
for (; !e.atEnd(); e.moveNext()) 
{ 
x = e.item(); 
s = s + x.DriveLetter; 
s += ":"; 
if (x.DriveType == 3) 
n = x.ShareName; 
else if (x.IsReady) 
n = x.VolumeName; 
else 
n = "[驅動器未就緒]"; 
s += n + ","; 
} 
var drives = s.split(","); 
var tableDrives = document.getElementById("tables_drives"); 
for ( var i = 0; i < drives.length-1; i++ ) 
{ 
var option = document.createElement("OPTION"); 
drives[i].split(":"); 
option.value = "["+drives[i].split(":")[0]+":]"+drives[i].split(":")[1]; 
option.text = "["+drives[i].split(":")[0]+":]"+drives[i].split(":")[1]; 
tableDrives.add(option); 
} 
get_drives(); 
} 

/**//* 
*tables_drives列表中選中的驅動器上所有文件夾放入table_folder列表中 
*/ 
function get_drives() 
{ 
var tableDrives = document.getElementById("tables_drives"); 
var tableFolders = document.getElementById("table_folder"); 
for ( var i = 0; i < tableDrives.options.length; i++ ) 
{ 
if ( tableDrives.options[i].selected == true ) 
{ 
var fso, f, fc, s; 
var drive = tableDrives.options[i].value.split(":")[0].substring(1,tableDrives.options[i].value.split(":")[0].length); 
document.getElementById("backDir").value = drive + ":\\"; 
fso = new ActiveXObject("Scripting.FileSystemObject"); 
if (fso.DriveExists(drive)) 
{ 
d = fso.GetDrive(drive); 
if ( d.IsReady ) 
{ 
f = fso.GetFolder(d.RootFolder); 
fc = new Enumerator(f.SubFolders); 
s = ""; 
for (;!fc.atEnd(); fc.moveNext()) 
{ 
s += fc.item(); 
s += ","; 
} 

var len = tableFolders.options.length; 
while(len >= 0) 
{ 
tableFolders.options.remove(len); 
len--; 
} 
var option = document.createElement("OPTION"); 
option.value = drive + ":\\"; 
option.text = drive + ":\\"; 
tableFolders.add(option); 
var folders = s.split(","); 
for ( j = 0; j < folders.length -1; j++) 
{ 
option = document.createElement("OPTION"); 
option.value = folders[j]; 
option.text = folders[j]; 
tableFolders.add(option); 
} 
} 
else 
{ 
alert("無法改變當前內容！") 
} 
} 
else 
return false; 
} 
} 
} 
function get_fileName() 
{ 

var tableFolders = document.getElementById("table_folder"); 
for ( var i = 0; i < tableFolders.options.length; i++ ) 
{ 
if ( tableFolders.options[i].selected == true ) 
{ 
var folderpath = tableFolders.options[i].value.substring(0,tableFolders.options[i].value.length); 
if ( folderpath.charAt(folderpath.length-1) == "\\" ) 
{ 
document.getElementById("backDir").value = folderpath; 
} 
else 
{ 
document.getElementById("backDir").value = folderpath + "\\"; 
} 
} 
} 
} 
/**//* 
*table_folder雙擊選項中的一個選項，就將該文件夾下面的文件夾顯示在table_folder列表中。 
*/ 
function get_file() 
{ 
var tableFolders = document.getElementById("table_folder"); 
var tableDrives = document.getElementById("tables_drives"); 
for ( var i = 0; i < tableFolders.options.length; i++ ) 
{ 
if ( tableFolders.options[i].selected == true ) 
{ 
var fso, f, fc, s; 
var folderpath = tableFolders.options[i].value.substring(0,tableFolders.options[i].value.length); 
if ( folderpath.charAt(folderpath.length-1) == "\\" ) 
{ 
document.getElementById("backDir").value = folderpath; 
} 
else 
{ 
document.getElementById("backDir").value = folderpath + "\\"; 
} 


fso = new ActiveXObject("Scripting.FileSystemObject"); 
f = fso.GetFolder(folderpath); 
fc = new Enumerator(f.SubFolders); 
s = ""; 
for (;!fc.atEnd(); fc.moveNext()) 
{ 
s += fc.item(); 
s += ","; 
} 
var len = tableFolders.options.length; 
while(len >= 0) 
{ 
tableFolders.options.remove(len); 
len--; 
} 
var opt = ""; 
var opt1 = ""; 
for ( j = 0; j < folderpath.split("\\").length; j++ ) 
{ 
var option = document.createElement("OPTION"); 
opt = opt + folderpath.split("\\")[j]+"\\"; 
if ( j > 0) 
{ 
opt1 = opt; 
option.value = opt1.substring(0,opt1.length-1); 
option.text = opt1.substring(0,opt1.length-1); 
tableFolders.add(option); 
} 
else 
{ 
option.value = opt; 
option.text = opt; 
tableFolders.add(option); 
} 

} 
if ( tableFolders.options[0].value == tableFolders.options[1].value ) 
{ 
tableFolders.options.remove(1); 
} 
if ( s != "" ) 
{ 
var folders = s.split(","); 
for ( j = 0; j < folders.length -1; j++) 
{ 
option = document.createElement("OPTION"); 
option.value = folders[j]; 
option.text = folders[j]; 
tableFolders.add(option); 
} 
} 
} 
} 
}

您可能感興趣的文章:

javascript addBookmark 加入收藏多瀏覽器兼容
不錯的加入收藏代碼，加入了對一些常見瀏覽器的判斷，更好的體現(xiàn)用戶體驗，兼容了ie,firefox.
2009-08-08
ES6中字符串string常用的新增方法小結
這篇文章主要介紹了ES6中字符串string常用的新增方法,結合實例形式總結分析了ES6中字符串string常用的新增方法功能與使用技巧,需要的朋友可以參考下
2017-11-11
基于javascript實現(xiàn)日歷功能原理及代碼實例
這篇文章主要介紹了基于javascript實現(xiàn)日歷效果原理及代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-05-05
JavaScript使用delete刪除數組元素用法示例【數組長度不變】
這篇文章主要介紹了JavaScript使用delete刪除數組元素用法,結合實例形式分析了delete刪除數組元素的具體用法與注意事項,需要的朋友可以參考下
2017-01-01
javascript結合canvas實現(xiàn)圖片旋轉效果
圖片的旋轉可以說是一種效果，但是逐漸旋轉已經不單單是屬于視覺效果那個范疇，其更具有使用性，功能性。照片有時候是需要橫過來的拍的，當我們預覽或共享到web上時需要進行旋轉。這個操作在以往可能更多的是交給軟件去完成，然后再將旋轉到正常角度的圖片發(fā)布到web上。
2015-05-05
基于JS實現(xiàn)任務隊列的示例代碼
顧名思義,任務隊列就是存放任務的隊列,隊列中的任務都嚴格按照進入隊列的先后順序執(zhí)行,所以下面我們就來看看如何基于JS實現(xiàn)任務隊列吧
2023-08-08
js通過元素class名字獲取元素集合的具體實現(xiàn)
獲取元素集合的方法有很多，接下來為大家介紹喜愛使用js通過元素class名字獲取元素集合的方法
2014-01-01
繼承行為在 ES5 與 ES6 中的區(qū)別詳解
這篇文章主要介紹了繼承行為在 ES5 與 ES6 中的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-12-12
js實現(xiàn)圖片淡入淡出切換簡易效果
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片淡入淡出切換簡易效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
JavaScript中第三方庫Apollo的使用詳解
Apollo 是一個廣泛使用的 JavaScript 第三方庫,主要用于構建與 GraphQL API 交互的應用程序,下面就跟隨小編一起來學習一下它的具體應用吧
2024-02-02