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

新手上路,请多包涵

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

当我使用

<input type="file"/>

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

<input type="file" webkitdirectory/>

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

我想要做的只是有一个输入按钮,或者实际上不必是一个按钮,而是一种为这两种可能性启动本机系统文件资源管理器的方法。

原文由 Dringo 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 945
2 个回答

您可以从 Renderer Process (浏览器窗口)启动 file system open dialog

On your Main Process , you are listening to the Renderer Process , in case of open-file-dialog command is sent from the Renderer Process , the Main Process 将显示每个操作系统的 _打开文件对话框_(如下所示,正在发送 ['openFile'] 属性,您也可以使用 ['openDirectory'] 目录,打开 对话框-or-57他们两个)并将所选文件\路径发送回 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)
  })
})

原文由 Alon Adler 发布,翻译遵循 CC BY-SA 3.0 许可协议

对于遇到类似麻烦的任何人,这只适用于电子。但是 electron 内置了一个时髦的文件对话框 API,它比原生的 HTML 更加灵活。

代码看起来像这样

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

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

原文由 Dringo 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏