Question

如何在Node.js / electron中打开文件对话框，以便能够选择文件夹或文件。

当我使用

时

<input type="file"/>

它将打开文件对话框，但不允许我选择文件夹。但是当我尝试

时

<input type="file" webkitdirectory/>

它将打开对话框，但不允许选择文件夹。

我想要做的只是有一个输入按钮，或者不一定是一个按钮，而是一种启动本机系统文件资源管理器的方法。

Answer 1

您可以从file system open dialog（浏览器窗口）发起Renderer Process。

在Main Process上，您正在收听Renderer Process，如果open-file-dialog发送Renderer Process命令，Main Process将显示每个操作系统的打开文件对话框（如下所示，正在发送['openFile']属性，您还可以将['openDirectory']用于开放目录对话框或它们两者）并将所选文件\路径发送回Renderer Process。

渲染器流程

//Adding an event listener to an html button which will send open-file-dialog to the main process
const ipc = require('electron').ipcRenderer
const selectDirBtn = document.getElementById('select-file')

selectDirBtn.addEventListener('click', function (event) {
     ipc.send('open-file-dialog')
});

//Getting back the information after selecting the file
ipc.on('selected-file', function (event, path) {

//do what you want with the path/file selected, for example:
document.getElementById('selected-file').innerHTML = `You selected: ${path}`

});

主要流程

//listen to an open-file-dialog command and sending back selected information
const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
ipc.on('open-file-dialog', function (event) {
  dialog.showOpenDialog({
    properties: ['openFile']
  }, function (files) {
    if (files) event.sender.send('selected-file', files)
  })
})

Answer 2

尝试添加directory以及webkitdirectory。否则请看这些：

Directory Chooser in HTML page

How to get folder directory from HTML input type "file" or any other way?

Answer 3

对于遇到类似问题的人来说，这只适用于电子。但是电子内置了一个时髦的文件对话框API，比原生的HTML更灵活。

代码看起来像这样

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

    dialog.showOpenDialog({
      properties: ["openDirectory","openFile"]
    },function (fileNames) {
      // do cool stuff here
    });

如何在文件对话框中选择文件OR文件夹

3 个答案: