于是网上查解决方案，查到两种，
一种是仅在谷歌浏览器上有效的方式，在input节点里加一个属性 webkitdirectory，就可以实现点击d出选择目录的功能，然后就可以截取目录，此种方式对非空文件夹是可以的实现的，只需监听此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或者div里面，并设置一个id，或者name属性，根据getElementById,getElementByName函数取到所要 *** 作的对象，对于input可以用.val()得到值，对于div等自己试试.innerHtml(),.html(),.text()函数看看哪个能取到值。然后把取到的值赋给那个文本框就可以了。示例代码：
<input type="file" name="file" accept=".xls" value=""/>
面一段代码是基于js实现的点击某个图标或按钮d出文件选择框的核心代码，代码比较简单，需要的朋友参考下具体代码如下所示：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<HTML>
<head>
<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
<script type=‘text/javascript‘>
function selectFile(){
//触发 文件选择的click事件
$("#file").trigger("click")
//其他code如 alert($("#file").attr("value"))
}
/* 获取 文件的路径 ，用于测试*/
function getFilePath(){
alert($("#file").attr("value"))
}
</script>
</head>
<body>
<!-- 给这个input 设置样式隐藏，切忌不可用display控制隐藏,可能不能跨浏览器 -->
<input type="file" id="file" onchange="getFilePath()"
style="filter:alpha(opacity=0)opacity:0width: 0height: 0"/>
<button onclick="selectFile()">select file</button>
<button onclick="getFilePath()">get FilePath</button>
</body>
</html>
选择后缀就需要去写个函数方法了！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）