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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Javascript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼、富有朝气。但也许你还没有发现并...
    萤火虫de梦阅读 9,816评论 0 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,168评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,130评论 25 709
  • 五月底学画画的,零基础,我的目标是到大后年,也就是三年之后辞职做一个培训班的美术老师。每天都很累,但是也得坚持画,...
    麦子熟了1981阅读 523评论 3 2
  • 我们知道信息交流非常重要,那网络中进程之间如何通信,比如我们每天打开浏览器浏览网页时,浏览器的进程怎么与web服务...
    夜幕青雨阅读 705评论 0 2