使用的技術: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