前端学习之路Electron——选择文件对话框

最新推荐文章于 2024-07-04 20:31:25 发布

HarryHY

最新推荐文章于 2024-07-04 20:31:25 发布

阅读量2.2k

点赞数 1

分类专栏： # Electron

本文链接：https://blog.csdn.net/HarryHY/article/details/105713676

版权

Electron 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

打开选择文件对话框——dialog

这个title就是下面红色框你的title

		const {dialog} = require('electron').remote；
        const {dialog} = require('electron').remote
        let opentext = document.querySelector('#opentext');
        opentext.onclick = function(e){
            dialog.showOpenDialog({
                title:'请选择你的文件',
            })
        }

在这里插入图片描述

默认打开的路径

        opentext.onclick = function(e){
            dialog.showOpenDialog({
                title:'请选择你的文件',
                defaultPath:'',//默认打开的文件路径选择
            })
        }

过滤文件格式

        opentext.onclick = function(e){
            dialog.showOpenDialog({
                title:'请选择你的文件',
                defaultPath:'',//默认打开的文件路径选择
                filters:[{ //过滤掉你不需要的文件格式
                    name:'image',
                    extensions:['jpg','png']
                }]
            })
        }

修改打开提交按钮

        opentext.onclick = function (e) {
            dialog.showOpenDialog({
                title: '请选择你的文件',
                defaultPath: '', //默认打开的文件路径选择
                filters: [{ //过滤掉你不需要的文件格式
                    name: 'image',
                    extensions: ['jpg', 'png']
                }],
                buttonLabel: '发送表情包'
            })
        }

在这里插入图片描述

将选择的图片放到窗口上

        opentext.onclick = function(e){
            dialog.showOpenDialog({
                title:'请选择你的文件',
                defaultPath:'',//默认打开的文件路径选择
                filters:[{ //过滤掉你不需要的文件格式
                    name:'image',
                    extensions:['jpg','png']
                }],
                buttonLabel:'发送表情包'
            }).then(res=>{
                let openimg = document.querySelector('#openimg');
                openimg.setAttribute('src',res.filePaths[0])
            }).catch(req=>{
                console.log(req)
            })
        }

在这里插入图片描述

全部

<!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>
    <!-- <button id="btn">
        打开新的窗口
    </button>
    <div>

    </div> -->
    <a id="aHref" href="https://www.baidu.com/">打开外部链接</a>
    <div id="myweb">
        open myweb
    </div>
    <div id='fatview'>

    </div>
    <div id="opentext">
        opentext
    </div>
    <img src="" alt="" id="openimg" style="width:100%">
    <script src="./render/openweb.js"></script>
    <script>
        const {dialog} = require('electron').remote
        let opentext = document.querySelector('#opentext');
        opentext.onclick = function(e){
            dialog.showOpenDialog({
                title:'请选择你的文件',
                defaultPath:'',//默认打开的文件路径选择
                filters:[{ //过滤掉你不需要的文件格式
                    name:'image',
                    extensions:['jpg','png']
                }],
                buttonLabel:'发送表情包'
            }).then(res=>{
                let openimg = document.querySelector('#openimg');
                openimg.setAttribute('src',res.filePaths[0])
            }).catch(req=>{
                console.log(req)
            })
        }
    </script>
</body>
</html>