JS开发IE文件选择器

最终效果图

使用的技术：ActiveXObject("Scripting.FileSystemObject")。这个IE的控件提供磁盘操作的接口，详细可网络咨询，界面美化使用bootstrap，图标是font awesome。

* 由于浏览器的安全限制，我这个功能实现的现实意义好像并不大。Google Firefox等不考虑了，仅限IE……

1.FileSystemObject方法

1.1 FileSystemObject类提供的接口

GetDrive负责获取驱动器信息，GetFolder负责获取文件夹信息，GetFile负责获取文件信息

Drive对象负责收集系统中的物理或逻辑驱动器资源内容，IsReady：驱动器是否可用，ShareName：共享名称（用于网络共享的时候的文件夹），VolumeName：卷标名称（给磁盘名的名字，比如C盘叫“Windows”），DriveLetter：驱动器字母（磁盘的编号C, D, E等），DriveType：驱动器类型，取值为：removable（移动介质 | 0）、fixed（固定介质 | 1）、network（网络资源 | 2）、CD-ROM或者RAM盘

1.2 创建FileSystemObject对象

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

1.3 创建对象后通过实例调用相关方法和属性

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方法，根据驱动或者文件夹获取驱动或文件夹中的子文件夹，并渲染到界面；当磁盘切换后，调用changeFolderAndDriver方法；单击文件夹获取到文件夹路劲，调用showPath方法；双击文件夹进入文件夹，并调用loadFolders方法重新渲染界面；

文件选择器生成逻辑

* 代码仓库：https://github.com/NoelCarlton/js-windows-folder-chooser

参考链接：http://www.jsann.com/post/activexobject_in_javascript.html