javascript 選擇文件夾對話框(web)
更新時間:2009年07月07日 16:50:29 作者:
web程序開發(fā)中經常會遇見選擇文件夾的時候,這對于web程序員是一件麻煩的事情,由于本地安全限制JS不能訪問本地文件,所以選擇文件夾一般都避而不談,筆者在寫一個程序的時候也遇見了同樣的問題,開始嘗試使用JS來遍歷文件,結果都沒有成功
沒有辦法,實踐證明最好的解決辦法是自己寫一個OCX控件,這樣就只要注冊一下OCX控件就可以了,同時OCX控件的可擴展性非常大,也就是給vc\delphi這些程序的功能引入到web中,其功能可想而知!
這里不說明OCX開發(fā)的過程了,給自己寫的OCX控件共享一下,希望能給一些朋友提供幫助。
這個OCX控件中提供了一個getFiles()方法,只要獲取控件對象,然后調用getFiles()方法就可以獲取對應路徑下的所有文件,如下圖:

該控件可以選擇任意盤符下的任意文件夾,圖中最下面的按鈕時web中的input,通過web中的js方法來獲取文件列表,OCX
的getFiles()方法返回文件名串,樣式如1.jpg;2.jpg;3.jpg,每個文件名中間用“;”鏈接,在js中使用split方法來分離一下就可以了。
頁面代碼如下:
<!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>無標題文檔</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="顯示數據" onClick="show()">
</body>
</html>
這里不說明OCX開發(fā)的過程了,給自己寫的OCX控件共享一下,希望能給一些朋友提供幫助。
這個OCX控件中提供了一個getFiles()方法,只要獲取控件對象,然后調用getFiles()方法就可以獲取對應路徑下的所有文件,如下圖:

該控件可以選擇任意盤符下的任意文件夾,圖中最下面的按鈕時web中的input,通過web中的js方法來獲取文件列表,OCX
的getFiles()方法返回文件名串,樣式如1.jpg;2.jpg;3.jpg,每個文件名中間用“;”鏈接,在js中使用split方法來分離一下就可以了。
頁面代碼如下:
復制代碼 代碼如下:
<!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>無標題文檔</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="顯示數據" onClick="show()">
</body>
</html>
這樣就可以使用該控件選取任意文件夾了,并且可以通過js獲取文件夾中的所有內容,由于篇幅有限,這里不對該OCX更多的功能做說明,下篇準備給OCX增加上傳功能,這樣既可以上傳整個文件夾,而且支持斷點續(xù)傳。
最后注明:OCX使用的時候需要注冊控件
注冊方法:運行cmd,進入比如OCX控件在C:\123.OCX,在cmd中運行RegSvr32 c:\123.OCX,會提示注冊成功,然后就可以在網頁中使用了!
打包下載
相關文章
js onmousewheel事件多次觸發(fā)問題解決方法
做一個首屏和第二屏之間滾動鼠標滾輪就可以整平切換的效果,遇到了很多問題,下面是問題解決方法2014-10-10JavaScript函數防抖與函數節(jié)流的定義及使用詳解
這篇文章主要為大家詳細介紹一下JavaScript中函數防抖與函數節(jié)流的定義及使用,文中的示例代碼講解詳細,對我們學習JS有一定幫助,需要的可以參考一下2022-08-08LayUI動態(tài)設置checkbox不顯示的解決方法
今天小編就為大家分享一篇LayUI動態(tài)設置checkbox不顯示的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09