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

问题描述

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

当我使用

 < input type ="file"/> 

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

 < input type ="file" webkitdirectory/> 

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

我想做的就是只有一个输入按钮，或者实际上不必是一个按钮，而是一种启动这两种可能性的本机系统文件浏览器的方法.

解决方案

您可以从 Renderer Process (浏览器窗口)启动文件系统打开对话框./p>

在您的 Main Process 上，您正在监听 Renderer Process ，如果 open-file-dialog 命令是从 Renderer Process ， Main Process 将根据操作系统显示一个 Open File对话框(如下所示，一个 ['openFile'] 属性正在发送，并且您也可以将 ['openDirectory'] 用于打开目录对话框，或同时使用这两个对话框)，然后会将选定的内容发送回去 Renderer Process 的文件\路径.

渲染器过程

 ///向html按钮添加事件侦听器，该按钮会将打开文件对话框发送到主进程const ipc = require('electron').ipcRendererconst selectDirBtn = document.getElementById('select-file')selectDirBtn.addEventListener('click'，function(event){ipc.send('打开文件对话框')});//选择文件后获取信息ipc.on('selected-file'，function(event，path){//使用选定的路径/文件执行所需的操作，例如:document.getElementById('selected-file').innerHTML =`您选择了:$ {path}`}); 

主要流程

 //收听打开文件对话框命令并发送回选定的信息const ipc = require('electron').ipcMainconst dialog = require('electron').dialogipc.on('open-file-dialog'，function(event){dialog.showOpenDialog({属性:['openFile']}，函数(文件){如果(文件)event.sender.send('选定文件'，文件)})}) 

How would someone open up a file dialog in Node.js / electron to be able to select either a folder or a file.

When I use

<input type="file"/>

it will open up the file dialog but won't allow me to select a folder.But when I try

<input type="file" webkitdirectory/>

it will open up the dialog, but won't allow for folder selection.

What I want to do is just have one input button, or doesn't really have to be a button, but a way to launch the native system file explorer for both possibilities.

解决方案

You can initiate a file system open dialog from a Renderer Process (a browser window).

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 will display an Open File Dialog per the Operating System (As demonstrated below, an ['openFile'] property is being sent, and you can also use ['openDirectory'] for Open Directory dialog, or both of them) and will send back the selected file\path to the Renderer Process.

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}`

});

Main Process

//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)
  })
})

这篇关于如何在文件对话框中选择文件或文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！