html - Electron从表单获取文件路径并显示为文本

Question

我正在用Electron创建一个简单的程序。该程序可以选择根据用户需要运行几个单独的功能。所有功能都需要输入文件和结果输出文件的保存位置。这是使用表格完成的。我希望用户一旦输入了位置，它就会在输入按钮旁边的div中显示出来。有没有办法在 Electron 内部做到这一点？

代码:

<!-- File Input Section -->
                <div class = "individual-input-container-2">
                    <div class="input-container" >
                        <div class = "inner-input-container">
                            <input type="file" id="file-input" class = "input-top" >
                            <p class = "input-desc-file">File</p>
                        </div>
                        <div>

                        </div>
                    </div>

                    <div class="input-container">
                        <div class = "inner-input-container">
                            <input type="file" webkitdirectory  id="save-input"class = "input-bottom">
                            <p class = "input-desc-save">Save Location</p>
                        </div>
                    </div>

                </div>

这是我正在 build 的照片

Answer 1

我前一阵子做了类似的事情，我的样子是这样的:

HTML:

<button id="choosePath">Choose Folder</button>

JS:

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

document.querySelector('#choosePath').addEventListener('click', (e) => {
    dialog.showOpenDialog({
        title:"Select Directory",
        properties: ["openDirectory"]
    }, (folderPaths) => {
        // folderPaths is an array that contains all the selected paths
        if(folderPaths === undefined){
            return;
        } else {
            // Do something with the folderPaths variable
        }
    });
});

基本上，这只是一个普通的按钮，可打开一个对话框窗口，您可以在其中选择路径。
如果确实选择了其中一个，则完整的路径将传递给回调函数，您可以在其中使用它来执行与它相关的任何操作。