showOpenFilePicker与普通按钮触发文件选择演示页面

展示

代码

• HTML：

  <button id="button" type="primary" is="ui-button">选择图片</button>
  <p id="output"></p>

  CSS：

  p {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  img {
    width: calc(50% - 0.5rem);
    aspect-ratio: 1;
    object-fit: contain;
    box-shadow: 0 0 0 1px #eee;
  }

• JS：

  if (window.showOpenFilePicker) {
      button.addEventListener('click', async function () {
          // 打开文件
          const arrFileHandle = await window.showOpenFilePicker({
              types: [{
                  description: 'Images',
                  accept: {
                      'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp']
                  }
              }],
              multiple: true
          });
          
          // 遍历选择的文件
          for (const fileHandle of arrFileHandle) {
              // 获取文件内容
              const fileData = await fileHandle.getFile();
              // 读文件数据
              const buffer = await fileData.arrayBuffer();
              // 转成Blod url地址
              let src = URL.createObjectURL(new Blob([buffer]));
              // 在页面中显示
              output.insertAdjacentHTML('beforeend', `<img src="${src}">`);
          }
      });
  }