本文目录一览：
- 1、js点击选择文件目录的功能
- 2、js中如何点击一个按钮弹出一个file文件框
- 3、js 打开input 选择指定类型文件（点击按钮打开input选择文件上传）
- 4、js实现点击按钮打开本地文件并将选择的文件名显示在文本框中?
js点击选择文件目录的功能
最近做一个小项目，前端需要有一个功能是点击某按钮时，弹出文件选择的框，然后获取目录并写入对应的输入框里，以往是选择某个文件进行上传，功能看起来有些像，但这次不同的是只能选择某个目录而不是文件，因为它并不是上传，它只是为了选择后台生成的文件保存的路径。
于是网上查解决方案，查到两种，
一种是仅在谷歌浏览器上有效的方式，在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中如何点击一个按钮弹出一个file文件框
js中点击一个按钮弹出一个file文件框的步骤如下：
1.在文件夹中创建一个html文件“test”。
2.在test文件中添加一个html的框架。
3.添加两个input，一个是button，一个是file把id设置为“open”style类型设置为“display:none”不显示。
4.打开后我们发现只显示这一个“打开文件”按钮。
5.现在我们给button添加onclick事件，调用openfile触发id为“open”的file。
6.现在我们在浏览器中点击“打开文件”文件按钮就会弹出选择文件路径对话框了。这样就解决了js中点击一个按钮弹出一个file文件框的问题了。
js 打开input 选择指定类型文件（点击按钮打开input选择文件上传）
——我点击的按钮——-
el-button @click=”uploadingAudioButton”
i class=”el-icon-folder-add”/i
/el-button
样式如下
div v-show=”false”
input
type=”file”
accept=’audio/ ‘ //指定类型 可以是image/ 等
capture=”microphone”
ref=”selectFile”
id=”selectFile”
@change=”checkFile( refs.selectFile.click();
}
//绑定在input上的事件
checkFile(e) {
//获取到你选择的文件
console.log(e.target.files[0]);
}
js实现点击按钮打开本地文件并将选择的文件名显示在文本框中?
先把每个要显示的数据都要放在一个input或者div里面，并设置一个id，或者name属性，根据getElementById,getElementByName函数取到所要操作的对象，对于input可以用.val()得到值，对于div等自己试试.innerHtml(),.html(),.text()函数看看哪个能取到值。然后把取到的值赋给那个文本框就可以了。
示例代码：
input type=”file” name=”file” accept=”.xls” value=””/
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/245278.html
微信扫一扫 
支付宝扫一扫 