最终效果图
使用的技术：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
网友评论