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

JavaScript018

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控件进行初始化和脚本运行"----"启用"

先获取当前的全路径，然后对全路径进行分析获取到跟路径

//js获取项目根路径，如： http://localhost:8083/uimcardprj

function getRootPath(){

    //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp

    var curWwwPath=window.document.location.href

    //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp

    var pathName=window.document.location.pathname

    var pos=curWwwPath.indexOf(pathName)

    //获取主机地址，如： http://localhost:8083

    var localhostPaht=curWwwPath.substring(0,pos)

    //获取带"/"的项目名，如：/uimcardprj

    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1)

    return(localhostPaht+projectName)

}

JS读写文件，分别如下：

//读文件

function readFile(filename){

var fso = new ActiveXObject("Scripting.FileSystemObject")

var f = fso.OpenTextFile(filename,1)

var s = ""

while (!f.AtEndOfStream)

s += f.ReadLine()+"\n"

f.Close()

return s

}

//读文件

function readFile(filename){

var fso = new ActiveXObject("Scripting.FileSystemObject")

var f = fso.OpenTextFile(filename,1)

var s = ""

while (!f.AtEndOfStream)

s += f.ReadLine()+"\n"

f.Close()

return s

}

//写文件

function writeFile(filename,filecontent){

var fso, f, s

fso = new ActiveXObject("Scripting.FileSystemObject")

f = fso.OpenTextFile(filename,8,true)

f.WriteLine(filecontent)

f.Close()

alert('ok')

}