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