javascript 選擇文件夾對話框(web)
更新時間：2009年07月07日 16:50:29 作者：
web程序開發(fā)中經(jīng)常會遇見選擇文件夾的時候，這對于web程序員是一件麻煩的事情，由于本地安全限制JS不能訪問本地文件，所以選擇文件夾一般都避而不談，筆者在寫一個程序的時候也遇見了同樣的問題，開始嘗試使用JS來遍歷文件，結(jié)果都沒有成功
沒有辦法，實(shí)踐證明最好的解決辦法是自己寫一個OCX控件，這樣就只要注冊一下OCX控件就可以了，同時OCX控件的可擴(kuò)展性非常大，也就是給vc\delphi這些程序的功能引入到web中，其功能可想而知！
這里不說明OCX開發(fā)的過程了，給自己寫的OCX控件共享一下，希望能給一些朋友提供幫助。
這個OCX控件中提供了一個getFiles()方法，只要獲取控件對象，然后調(diào)用getFiles()方法就可以獲取對應(yīng)路徑下的所有文件，如下圖：
該控件可以選擇任意盤符下的任意文件夾，圖中最下面的按鈕時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>無標(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>
這里不說明OCX開發(fā)的過程了，給自己寫的OCX控件共享一下，希望能給一些朋友提供幫助。
這個OCX控件中提供了一個getFiles()方法，只要獲取控件對象，然后調(diào)用getFiles()方法就可以獲取對應(yīng)路徑下的所有文件，如下圖：
該控件可以選擇任意盤符下的任意文件夾，圖中最下面的按鈕時web中的input，通過web中的js方法來獲取文件列表,OCX
的getFiles()方法返回文件名串，樣式如1.jpg;2.jpg;3.jpg，每個文件名中間用“;”鏈接，在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>
這樣就可以使用該控件選取任意文件夾了，并且可以通過js獲取文件夾中的所有內(nèi)容，由于篇幅有限，這里不對該OCX更多的功能做說明，下篇準(zhǔn)備給OCX增加上傳功能，這樣既可以上傳整個文件夾，而且支持?jǐn)帱c(diǎn)續(xù)傳。
最后注明：OCX使用的時候需要注冊控件
注冊方法：運(yùn)行cmd，進(jìn)入比如OCX控件在C:\123.OCX,在cmd中運(yùn)行RegSvr32 c:\123.OCX，會提示注冊成功，然后就可以在網(wǎng)頁中使用了！
打包下載
您可能感興趣的文章:
- 九種js彈出對話框的方法總結(jié)
- JavaScript彈出對話框的三種方式
- ExtJS Ext.MessageBox.alert()彈出對話框詳解
- javascript window.confirm確認(rèn) 取消對話框?qū)崿F(xiàn)代碼小結(jié)
- JavaScript寫的一個自定義彈出式對話框代碼
- Extjs Ext.MessageBox.confirm 確認(rèn)對話框詳解
- js彈出確認(rèn)是否刪除對話框
- javascript showModalDialog模態(tài)對話框使用說明
- 利用javascript打開模態(tài)對話框(示例代碼)
- js+html5生成自動排列對話框?qū)嵗?/a>
相關(guān)文章
使用JavaScript實(shí)現(xiàn)實(shí)時搜索建議功能
在我們的技術(shù)旅程中,JavaScript 無疑是一個不可或缺的伙伴,這篇文章主要為大家詳細(xì)介紹了如何使用 JavaScript 來實(shí)現(xiàn)一個復(fù)雜功能,即實(shí)時搜索建議,感興趣的可以了解下2024-02-02
JavaScript 是弱類型語言, 為了保證數(shù)值的有效性, 在處理數(shù)值的時候, 我們可以對數(shù)值字符串進(jìn)行強(qiáng)行轉(zhuǎn)換. 如 parseInt 取整和 parseFloat 取浮點(diǎn)數(shù)2011-05-05
Echarts讀取動態(tài)數(shù)據(jù)完整代碼
這篇文章主要給大家介紹了關(guān)于Echarts讀取動態(tài)數(shù)據(jù)的相關(guān)資料,使用Echarts畫圖時,數(shù)據(jù)一般不是靜態(tài)寫死的,而是通過后端接口動態(tài)獲取的,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了微信js-sdk上傳與下載圖片接口用法,結(jié)合實(shí)例形式分析了基于上傳圖片接口(uploadImage)和下載圖片接口(downloadImage)針對圖片操作的相關(guān)技巧,需要的朋友可以參考下2016-10-10
本文主要介紹了Layui實(shí)現(xiàn)多條件查詢，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
淺談函數(shù)調(diào)用的不同方式,以及this的指向
下面小編就為大家?guī)硪黄獪\談函數(shù)調(diào)用的不同方式,以及this的指向。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
JS俄羅斯方塊完美注釋版 v 1.01 從學(xué)c語言那一會兒都想寫一個俄羅斯方塊,可是每次動起手總覺得難度太大. 今天終于用了大約4個小時寫出來了. 其中在涉及到方塊變型的時候還咨詢了2008-11-11
瀑布流主要應(yīng)用在圖片展示頁面上。如果有一大批圖片需要展示，原始圖片尺寸不一致，又希望每張圖片都能不剪裁，完整顯示，那么就要給圖片規(guī)定一個寬度，解放它們的高度。利用網(wǎng)頁高度不限這個特性，充分利用頁面的空間，盡可能的展示多的圖片。下面我們就來詳細(xì)探討下2015-05-05
詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象（2）
這篇文章主要介紹了JavaScript基于面向?qū)ο笾畡?chuàng)建對象，詳細(xì)的分析面向?qū)ο蟮脑头绞揭约捌渌C合的方式，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了JS運(yùn)動的實(shí)現(xiàn)原理，介紹了JS多種運(yùn)動方式，希望大家仔細(xì)學(xué)習(xí)，感興趣的小伙伴們可以參考一下2015-12-12