js点击选择文件目录的功能

JavaScript011

js点击选择文件目录的功能,第1张

最近做一个小项目,前端需要有一个功能是点击某按钮时,弹出文件选择的框,然后获取目录并写入对应的输入框里,以往是选择某个文件进行上传,功能看起来有些像,但这次不同的是只能选择某个目录而不是文件,因为它并不是上传,它只是为了选择后台生成的文件保存的路径。 于是网上查解决方案,查到两种, 一种是仅在谷歌浏览器上有效的方式,在input节点里加一个属性 webkitdirectory,就可以实现点击弹出选择目录的功能,然后就可以截取目录,此种方式对非空文件夹是可以的实现的,只需监听此input的change事件即可,但如果选择的是空文件夹,就不会触发事件,就无法获取路径,所以这方法不复合我的需求。 另一种是只适用于IE浏览器的方式,即调用IE的activeX控件,为点击按钮绑定事件,然后就可以获取目录,然后到目录调到想要的地方即可,具体实现方式是: <input id="show"> <button onclick="clickBtn()">点击</button> function click() {     try {         var Message = "\u8bf7\u9009\u62e9\u6587\u4ef6\u5939" //选择框提示                var Shell = new ActiveXObject("Shell.Application")         var Folder = Shell.BrowseForFolder(0, Message, 64, 17) //起始目录为:我的电脑                //var Folder = Shell.BrowseForFolder(0, Message, 0) //起始目录为:桌面                if (Folder != null) {             Folder = Folder.items() // 返回 FolderItems 对象                         Folder = Folder.item() // 返回 Folderitem 对象                         Folder = Folder.Path // 返回路径                         if (Folder.charAt(Folder.length - 1) != "\\") {                 Folder = Folder + "\\"             }             document.getElementById('show').value = Folder             return Folder         }     } catch (e) {  alert(e.message)} } 但些方式也有一个问题是,此控件是默认关闭的,需要用户手动启用,并且要把本站点加入可信任站点才行,具体设置过程是: 1. 单击菜单工具->Internet选项->安全->受信任站点->站点->把此网站设为可信站点 2. 在自定义级别->对没有标记为安全的ActiveX控件进行初始化和脚本运行"----"启用"

<input type="button" value="choose folder" name="" onclick="BrowseFolder()">

function BrowseFolder(){

try{

   var Message = "please choose folder"   //选择框提示信息

   var Shell = new ActiveXObject( "Shell.Application" )

   var Folder = Shell.BrowseForFolder(0,Message,0x0040,0x11)//起始目录为:我的电脑

   //var Folder = Shell.BrowseForFolder(0,Message,0) //起始目录为:桌面

   if(Folder != null){

  Folder = Folder.items() // 返回 FolderItems 对象

  Folder = Folder.item() // 返回 Folderitem 对象

  Folder = Folder.Path    // 返回路径

  alert(Folder) 

 }

}catch(e){

   alert("exception")

}

}

查看以下场景:

在 /js 目录下执行 node foo/index.js ,会出现文件找不到的情况,原因: /js/foo/index.js 文件中读文件是写的相对路径也即: ./a.txt ,而这个相对路径实际上是相对于执行 node 命令所处的路径,也即以上的执行node时,进行文件操作时查找的路径是: js/a.txt 显然 /js 目录下没有该文件,也就查找失败。

再看一种场景

在 /js 目录下执行 node other.js 命令,执行结果为:

原因和之前的一样,虽然在 js 下执行该命令,但是在该文件中还是在引入并执行 index.js 文件,由于 node 命令执行的目录是: /js 目录,所以在文件操作的时候,查找的文件目录是: /js/a.txt ,显然又是找不到的结果

所以在文件操作中,相对路径是不可靠的,为了解决这个问题,则需要将相对路径改为绝对路径。但是如果仅仅是将文件操作的路径改为 C:\node\js\foo\a.txt 路径,则当交付项目的时候,还需要将该路径改为当前项目所处计算机的绝对路径,显然这是不可行的,因此 __dirname 开始发挥作用。

而什么 __dirname 是什么呢?

在每个模块中,除了 require 、 exports 等模块相关API之外,还有两个特殊的成员

由于 __dirname 不受node命令所属路径影响,同时又可以动态的获取当前文件的绝对路径,因此可以是个不错的选择,将 /foo/index.js 修改:

模块中 require 中所写的路径跟文件操作的路径是没有关系的,其路径是相对于文件模块的,也即相对于当前文件模块(文件)所处目录的相对路径。

此时查找 ./foo/index.js 就是相对于 /js 目录