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

JavaScript022

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完成三级目录

    <!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

*{margin: 0padding: 0}

body{

font-size: 12px!important

}

.box{

width: 66px

margin:66px auto

}

/* 一级li样式 */

li{list-style: none}

.yijimulu{

width: 66px

height: 24px

display: flex

justify-content: center

align-items: center

box-sizing: border-box

background-color: orange

color: #333333

position: relative

cursor: pointer

}

/* 二级ul样式 */

.erjiul{

position: absolute

top: -1px

left: 65px

display: none

}

.erjili,.sanjiLi{

width: 66px

height: 24px

display: flex

justify-content: center

align-items: center

box-sizing: border-box

background-color: orange

color: #333333

position: relative

cursor: pointer

}

.sanjiul{

position: absolute

top: -1px

left: 65px

display: none

}

</style>

</head>

<body>

<div class="box"></div>

<script>

var obox = document.querySelector('.box')

function Message(box) {

this.box = box

// 创建一级目录方法

this.CreatOne()

// 创建二级目录方法

this.CreatTwo()

// 创建三级目录

this.CreatThree()

}

// 创建一级目录

Message.prototype.CreatOne = function (){

// 创建一级ul

this.ul = document.createElement('ul')

// 创建一级li

this.ul.innerHTML = `

<li>一级目录</li><li>一级目录</li><li>一级目录</li><li>一级目录</li><li>一级目录</li>

`

// 添加一级ul到div内

this.box.appendChild(this.ul)

// console.log(this.ul)

// 获取一级ul内所有li并起名

this.oli = this.ul.querySelectorAll('li')

// 循环出一级ul内所有li并起名设置样式

for (let i = 0i <this.oli.lengthi++) {

this.oli[i].className = 'yijimulu'

// 设置一级样式鼠标划入效果

this.oli[i].addEventListener('mouseenter',()=>{

// 清空一级目录鼠标移入效果

for(let i = 0i <this.oli.lengthi++) {

this.oli[i].style.border = 'none'

this.oli[i].style.color = '#333333'

this.bulname[i].style.display = 'none'

}

this.oli[i].style.border = '1px solid red'

this.oli[i].style.color = 'white'

this.bulname[i].style.display = 'block'

},false)

// 设置一级目录鼠标移出效果

this.oli[i].addEventListener('mouseleave',()=>{

this.oli[i].style.border = 'none'

this.oli[i].style.color = '#333333'

this.bulname[i].style.display = 'none'

},false)

}

}

// 创建三级目录

Message.prototype.CreatTwo = function () {

// this.oli是一级子li目录

// 创建二级目录ul

this.bul = document.createElement('ul')

// 添加到一级li里  >this.oli

for (let i = 0i <this.oli.lengthi++) {

this.oli[i].innerHTML = '一级目录<ul></ul>'

}

// 获取所有二级ul

this.bulname = this.ul.querySelectorAll('ul')

for (let i = 0i<this.bulname.lengthi++){

// 给二级ul起名

this.bulname[i].className = 'erjiul'

// 创建二级li

this.bulname[i].innerHTML = `<li>二级目录</li><li>二级目录</li><li>二级目录</li><li>二级目录</li><li>二级目录</li>`

this.bli = this.bulname[i].querySelectorAll('li')

// console.log(this.bli)

for (let i = 0i<this.bulname.lengthi++) {

this.bli[i].className = 'erjili'

}

}

// 获取所有二级Ul下的li

// 先通过所有二级ul的类名获取到所有的二级ul

}

// 创建三级目录

Message.prototype.CreatThree = function () {

// 先获取到所有的二级li

this.twoli = this.ul.querySelectorAll('.erjili')

// console.log(this.twoli)

// 创建三级<ul>

for (let i = 0i<this.twoli.lengthi++) {

// console.log(this.twoli)

this.twoli[i].addEventListener('mouseenter',()=>{

// console.log(this.twoli[i])

for(let i = 0i<this.twoli.lengthi++){

this.twoli[i].style.border = 'none'

this.twoli[i].style.color = '#333333'

this.culclass[i].style.display = 'none'

}

this.twoli[i].style.border = '1px solid red'

this.twoli[i].style.color = 'white'

this.culclass[i].style.display = 'block'

},false)

this.twoli[i].addEventListener('mouseleave',()=>{

this.twoli[i].style.border = 'none'

this.twoli[i].style.color = '#333333'

this.culclass[i].style.display = 'none'

},false)

}

this.cul = document.createElement('ul')

for (let i = 0i<this.twoli.lengthi++) {

this.twoli[i].innerHTML = '二级目录<ul></ul>'

this.culname = this.twoli[i].querySelector('ul')

this.culname.className = 'sanjiul'

this.culname.innerHTML = `<li>三级目录</li><li>三级目录</li><li>三级目录</li><li>三级目录</li><li>三级目录</li>`

// 获取所有三级Li

this.culclass = this.ul.querySelectorAll('.sanjiul')

for (let i = 0i<this.culclass.lengthi++) {

this.cli = this.culclass[i].querySelectorAll('li')

for (let  i = 0i<this.cli.lengthi++){

// this.cli = this.culclass[i].querySelectorAll('li')

this.cli[i].className = 'sanjiLi'

}

}

this.threeli = this.ul.querySelectorAll('.sanjiLi')

console.log(this.threeli)

for (let i = 0i <this.threeli.lengthi++) {

this.threeli[i].addEventListener('mouseenter',()=>{

for (let i = 0i<this.threeli.lengthi++) {

this.threeli[i].style.border = 'none'

this.threeli[i].style.color = '#333'

}

this.threeli[i].style.border = '1px solid red'

this.threeli[i].style.color = 'white'

},false)

}

}

}

var msg = new Message(obox)

</script>

</body>

</html>