1.showOpenDialog

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Demo</title>
</head>

<body>
    <h1>Hello demo</h1>
    <button id="btn">打开子窗口</button>
    <a id="go_a" href="https://www.cnblogs.com/fwjlucifinil/p/13535393.html">luc</a>
    <div id="son_call"></div>
    <button id="upload">12312</button>
    <img id="img_xjj" style="width: 100%;">
</body>
<script src="render/index.js"></script>
<script>
    const { dialog } = require('electron').remote
    // 打开文件选择对话框可以使用dialog.showOpenDialog()方法来打开，它有两个参数，一个是设置基本属性，另一个是回调函数，如果是异步可以使用then来实现。
    // showOpenDialog异步  showOpenDialogSync  同步
    // title ： String (可选)，对话框的标题
    // defaultPath ： String (可选),默认打开的路径,默认文件名
    // buttonLabel ： String (可选), 确认按钮的自定义标签，当为空时，将使用默认标签
    // filters ： 文件选择过滤器，定义后可以对文件扩展名进行筛选
    // properties：打开文件的属性，比如打开文件还是打开文件夹，甚至是隐藏文件。
    var upload = this.document.getElementById('upload')
    upload.onclick = function () {
        dialog.showOpenDialog({
            title: '天下的一切都是本王所有',
            defaultPath: 'd:\1',
            filters: [{
                name: 'jpg',
                extensions: ['jpg', 'png']
            }],
            buttonLabel: '开启新世界大门!'
        }).then(result => {
            let image = document.getElementById('img_xjj')
            console.log(result)
            image.setAttribute("src", result.filePaths[0])
        }).catch(err=>{
            console.log(err)
        })
    }
</script>

</html>

2.showSaveDialog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>弹出子窗口</h2>
    <button id="son_btn">向父窗口传递信息</button>
    <button id="upload_file">上传文件</button>
    <button id="save_file">保存文件</button>
</body>
<script>
    var pop_btn = this.document.getElementById("son_btn")
    pop_btn.onclick = function(e){
        //window.opener表示当前窗口的父窗口
        //
        alert("发送")
        window.opener.postMessage('I`m Lucifinil_popup')
    }

    const { dialog } = require('electron').remote
    var upload_file = this.document.getElementById('upload_file')
    upload_file.onclick = function () {
        dialog.showOpenDialog({
            title:'天下的一切都是本王所有',
            defaultPath:"xiao.jpg"
        })
    }

    const fs = require('fs')
    var save_file = this.document.getElementById('save_file')
    save_file.onclick = function(){
        dialog.showSaveDialog({
            title:'保存文件'
        }).then(result=>{
            window.opener.postMessage(result)
            console.log(result)
            fs.writeFileSync(result.filePath,'啊哈哈哈')
        }).catch(err=>{
            console.log()
        })
    }

</script>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 electron实现大文件上传 Flask保存或解压上传的文件 java 网页保存上传文件 tornado上传文件，且把文件进行保存 SpringBoot上传ZIP文件并保存文件信息 electron-利用node开发桌面应用 electron-子窗口与父窗口通信 Java 上传zip文件解析保存 nodejs --- 上传文件并保存到磁盘 input[type="file"]文件上传并保存