最近做一个小项目,前端需要有一个功能是点击某按钮时,弹出文件选择的框,然后获取目录并写入对应的输入框里,以往是选择某个文件进行上传,功能看起来有些像,但这次不同的是只能选择某个目录而不是文件,因为它并不是上传,它只是为了选择后台生成的文件保存的路径。
于是网上查解决方案,查到两种,
一种是仅在谷歌浏览器上有效的方式,在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怎么实现弹出个选择文件的对话框
可以实现的,大概的思路是这样:
1.先新建一ASP页(不知道你用什么来做的,就以asp为例吧),该页的作用是读取服务器上某个目录下的所有文件,并显示文件列表,做出类似选择文件对话框的样子。具体代码网上有很多,你以“asp 遍历文件夹”作为关键字在或google中搜一下。
2.在“修改”按钮上使用Javascript的模态对话框弹出上一步做出来的网页。
就是window.showModalDialog(),模态对话框可以接收父窗口传来的参数,也可以返回参数给父窗口,利用这一特性,当你在对话框中选择好文件点确定时,可以从对话框将选择内容返回到父页面上。具体怎么用?同样建议你以“showModalDialog”作为关键字到网上去搜一下。
Ⅲ 请问如何用js实现打开选择文件和保存文件至自选路径的对话框
下面是一个VB脚本的,需要加入可信站点才能弹出对话框,打开要保存的文件夹
<script language="vbscript">
Function Foder()
Const MY_COMPUTER = &H11&
Const WINDOW_HANDLE = 0
Const OPTIONS = 0
Set objShell = CreateObject("Shell.Application")
Set objFolder = objShell.Namespace(MY_COMPUTER)
Set objFolderItem = objFolder.Self
strPath = objFolderItem.Path
Set objShell = CreateObject("Shell.Application")
Set objFolder = objShell.BrowseForFolder _
(WINDOW_HANDLE, "请选择文件夹:", OPTIONS, strPath)
If objFolder Is Nothing Then
exit Function
End If
Set objFolderItem = objFolder.Self
objPath = objFolderItem.Path
document.frmList.FODER_PATH.value = objPath
End Function
</script>
<input type = "button" name = "path" size = "100" onclick="Foder()" value="选择文件夹" />
客户导入选择文件就用file就可以
<input type="file" name="DATA_RESTORE_PATH" maxlength="20" style="WIDTH: 100px" >