JS開發(fā)IE文件選擇器

最終效果圖

使用的技術:ActiveXObject("Scripting.FileSystemObject")。這個IE的控件提供磁盤操作的接口和二,詳細可網(wǎng)絡咨詢惯吕,界面美化使用bootstrap,圖標是font awesome淹魄。

* 由于瀏覽器的安全限制堡距,我這個功能實現(xiàn)的現(xiàn)實意義好像并不大。Google Firefox等不考慮了羽戒,僅限IE……

1.FileSystemObject方法

1.1 FileSystemObject類提供的接口

GetDrive負責獲取驅動器信息缤沦,GetFolder負責獲取文件夾信息,GetFile負責獲取文件信息

Drive對象負責收集系統(tǒng)中的物理或邏輯驅動器資源內容易稠,IsReady:驅動器是否可用缸废,ShareName:共享名稱(用于網(wǎng)絡共享的時候的文件夾),VolumeName:卷標名稱(給磁盤名的名字,比如C盤叫“Windows”)企量,DriveLetter:驅動器字母(磁盤的編號C, D, E等)测萎,DriveType:驅動器類型,取值為:removable(移動介質 | 0)届巩、fixed(固定介質 | 1)硅瞧、network(網(wǎng)絡資源 | 2)、CD-ROM或者RAM盤

1.2 創(chuàng)建FileSystemObject對象

var fileSystemObject = new ActiveXObject("Scripting.FileSystemObject");

1.3 創(chuàng)建對象后通過實例調用相關方法和屬性

2.封裝的方法

如圖恕汇,方法的使用和返回值在注釋中說明:

封裝的方法

方法封裝后,打包成類拇勃,并提供接口供外部使用:

`````

this.getDriver=getDriver;

this.getFolder=getFolder;

this.getDriverWithName=getDriverWithName;

this.enterFolder=enterFolder;

this.createFolder=createFolder;

this.getBaseName=getBaseName;

``````

3. 界面結構

界面使用bootstrap的組件:modal,點擊按鈕孝凌,彈出文件選擇器:

界面代碼

4. 文件選擇器生成邏輯:

當瀏覽器加載后方咆,我們需要默認生成一些文件夾,加載初始化的樣式蟀架,比如初始化為C盤瓣赂,這些是在window,onload方法中完成。

loadDrivers方法生成磁盤選擇控件片拍;loadFolders方法煌集,根據(jù)驅動或者文件夾獲取驅動或文件夾中的子文件夾,并渲染到界面捌省;當磁盤切換后苫纤,調用changeFolderAndDriver方法;單擊文件夾獲取到文件夾路勁纲缓,調用showPath方法卷拘;雙擊文件夾進入文件夾,并調用loadFolders方法重新渲染界面祝高;

文件選擇器生成邏輯

* 代碼倉庫:https://github.com/NoelCarlton/js-windows-folder-chooser

參考鏈接:http://www.jsann.com/post/activexobject_in_javascript.html

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末栗弟,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子工闺,更是在濱河造成了極大的恐慌乍赫,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件陆蟆,死亡現(xiàn)場離奇詭異雷厂,居然都是意外死亡,警方通過查閱死者的電腦和手機遍搞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進店門罗侯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人溪猿,你說我怎么就攤上這事钩杰∪宜” “怎么了?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵讲弄,是天一觀的道長措左。 經(jīng)常有香客問我,道長避除,這世上最難降的妖魔是什么怎披? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮瓶摆,結果婚禮上凉逛,老公的妹妹穿的比我還像新娘。我一直安慰自己群井,他們只是感情好状飞,可當我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著书斜,像睡著了一般诬辈。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上荐吉,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天焙糟,我揣著相機與錄音,去河邊找鬼样屠。 笑死穿撮,一個胖子當著我的面吹牛,可吹牛的內容都是我干的痪欲。 我是一名探鬼主播混巧,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼勤揩!你這毒婦竟也來了咧党?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤陨亡,失蹤者是張志新(化名)和其女友劉穎傍衡,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體负蠕,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡蛙埂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了遮糖。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片绣的。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出屡江,到底是詐尸還是另有隱情芭概,我是刑警寧澤,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布惩嘉,位于F島的核電站罢洲,受9級特大地震影響,放射性物質發(fā)生泄漏文黎。R本人自食惡果不足惜惹苗,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望耸峭。 院中可真熱鬧桩蓉,春花似錦、人聲如沸劳闹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽玷或。三九已至,卻和暖如春片任,著一層夾襖步出監(jiān)牢的瞬間偏友,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工对供, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留位他,地道東北人。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓产场,卻偏偏與公主長得像鹅髓,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子京景,可洞房花燭夜當晚...
    茶點故事閱讀 43,612評論 2 350

推薦閱讀更多精彩內容

  • Javascript是網(wǎng)頁制作中離不開的腳本語言窿冯,依靠它,一個網(wǎng)頁的內容才生動活潑确徙、富有朝氣醒串。但也許你還沒有發(fā)現(xiàn)并...
    螢火蟲de夢閱讀 9,711評論 0 3
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn)鄙皇,斷路器芜赌,智...
    卡卡羅2017閱讀 134,637評論 18 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,839評論 25 707
  • 五月底學畫畫的,零基礎伴逸,我的目標是到大后年缠沈,也就是三年之后辭職做一個培訓班的美術老師。每天都很累,但是也得堅持畫洲愤,...
    麥子熟了1981閱讀 497評論 3 2
  • 我們知道信息交流非常重要颓芭,那網(wǎng)絡中進程之間如何通信,比如我們每天打開瀏覽器瀏覽網(wǎng)頁時禽篱,瀏覽器的進程怎么與web服務...
    夜幕青雨閱讀 685評論 0 2