快捷導(dǎo)航

javascript 選擇文件夾對話框(web)

更新時(shí)間：2009年07月07日 16:50:29 作者：

web程序開發(fā)中經(jīng)常會(huì)遇見選擇文件夾的時(shí)候，這對于web程序員是一件麻煩的事情，由于本地安全限制JS不能訪問本地文件，所以選擇文件夾一般都避而不談，筆者在寫一個(gè)程序的時(shí)候也遇見了同樣的問題，開始嘗試使用JS來遍歷文件，結(jié)果都沒有成功

沒有辦法，實(shí)踐證明最好的解決辦法是自己寫一個(gè)OCX控件，這樣就只要注冊一下OCX控件就可以了，同時(shí)OCX控件的可擴(kuò)展性非常大，也就是給vc\delphi這些程序的功能引入到web中，其功能可想而知！
這里不說明OCX開發(fā)的過程了，給自己寫的OCX控件共享一下，希望能給一些朋友提供幫助。
這個(gè)OCX控件中提供了一個(gè)getFiles()方法，只要獲取控件對象，然后調(diào)用getFiles()方法就可以獲取對應(yīng)路徑下的所有文件，如下圖：

該控件可以選擇任意盤符下的任意文件夾，圖中最下面的按鈕時(shí)web中的input，通過web中的js方法來獲取文件列表,OCX
的getFiles()方法返回文件名串，樣式如1.jpg;2.jpg;3.jpg，每個(gè)文件名中間用“;”鏈接，在js中使用split方法來分離一下就可以了。
頁面代碼如下：

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無標(biāo)題文檔</title> 
<script type="text/javascript"><!-- 
function show(){ 
var obj=document.getElementById("pathOcx"); 
var str=obj.getFiles(); 
var list=str.split(";"); 
for(var i=0;i<list.length;i++){ 
if(list[i]!=""){ 
alert(list[i]); 
    } 
} 
} 
// --></script> 
</head> 

<body> 
<OBJECT 
id="pathOcx" 
     classid="clsid:13BF0862-063C-432F-A8DF-07C2823E8562" 
     width=420 
     height=300 
     align=center 
     hspace=0 
     vspace=0 
> 
</OBJECT> 
<br> 
<input type="button" name="Submit" value="顯示數(shù)據(jù)" onClick="show()"> 
</body> 
</html>