打开对话框

最新推荐文章于 2024-05-18 12:00:00 发布

weixin_46852620

最新推荐文章于 2024-05-18 12:00:00 发布

阅读量167

点赞数

分类专栏：学习electron

本文链接：https://blog.csdn.net/weixin_46852620/article/details/111831256

版权

学习electron 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!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="openDialogBtn">打开一个对话框</button>
    <img src="" alt="" id="myImage" />
  </body>
  <script>
    const { dialog } = require('electron').remote
  window.onload = function () {
  const openDialogBtn = document.querySelector('#openDialogBtn')
  openDialogBtn.addEventListener('click', function () {
    // dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] })
    dialog.showOpenDialog({
      title: '选择文件的标题1111', // 对话框的标题
      defaultPath: 'xiaojiejie.jpg', // 默认的文件名字
      filters: [
        {
          name: 'img',
          extensions: ['jpg', 'png'] // 只允许 jpg 和 png 格式的文件
        }
      ],
      buttonLabel: '自定义的按钮标签222' // 自定义按钮文本显示内容
    })
    .then((res) => {
      // 选择文件之后的处理
      console.log(res)
      if (!res.canceled) { // 如果不是点击的 取消按钮
        const myImage = document.querySelector('#myImage')
        myImage.src = res.filePaths[0] // 图片显示在界面中（文件可以多选）
      } else {
        alert('你选择了取消按钮')
      }
    })
    .catch((err) => {
      // 选择文件出错的处理
      console.log(err)
    })
  })
}
  </script>
</html>

weixin_46852620

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
打开对话框

<!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> &lt
复制链接

扫一扫

专栏目录