JS打开本地文件夹窗口|极客笔记

JS打开本地文件夹窗口

在Web开发中，有时我们需要让用户在浏览器中打开本地文件夹，以便他们可以浏览本地文件并选择上传。虽然通常情况下，网页不能直接访问用户的本地文件系统，但在一些特殊的场景下，我们可以通过JavaScript实现打开本地文件夹窗口的功能。

使用input元素

在HTML中，我们可以使用input元素的type属性为file来创建一个文件上传的input框。当用户点击这个input框时，系统会弹出文件浏览窗口，用户可以选择本地文件上传。

<input type="file" id="fileInput">

当用户选择了本地文件后，我们可以通过JavaScript来获取用户选择的文件路径，进而实现打开本地文件夹窗口的效果。

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", function() {
    const file = this.files[0];
    const filePath = file.path;

    // 打开本地文件夹窗口
    window.open(filePath, '_blank');
});

在上面的代码中，我们首先获取到id为fileInput的input元素，然后为其添加change事件监听器。当用户选择了文件后，会触发这个change事件，我们就可以通过this.files[0].path来获取到用户选择的文件的路径，然后通过window.open()方法来打开本地文件夹窗口。

使用Electron

如果我们在开发Electron应用程序，就可以更加方便地实现打开本地文件夹窗口的功能。在Electron中，我们可以使用node.js中的fs和dialog模块来实现本地文件系统的访问。

首先，我们需要安装Electron依赖：

npm install electron --save-dev

然后，在我们的Electron应用中，可以通过以下代码来实现打开本地文件夹窗口的功能：

const { dialog } = require('electron').remote;

document.getElementById("openFolderBtn").addEventListener("click", function() {
    dialog.showOpenDialog({
        properties: ['openDirectory']
    }).then(result => {
        const folderPath = result.filePaths[0];

        // 打开本地文件夹窗口
        window.open(folderPath, '_blank');
    });
});

在上面的代码中，我们首先引入了Electron中的dialog模块，然后为一个按钮添加了click事件监听器。当用户点击这个按钮时，会弹出一个选择文件夹的对话框，用户可以选择文件夹并获取到文件夹的路径。然后，我们就可以通过window.open()方法来打开本地文件夹窗口。