使用按钮功能打开文件浏览器并显示图像文件

<button id="fileButton">选择图像文件</button>

document.getElementById('fileButton').addEventListener('click', function() {
  // 创建一个<input>元素
  var input = document.createElement('input');
  input.type = 'file';

  // 设置文件类型为图像文件
  input.accept = 'image/*';

  // 添加change事件监听器，当文件选择完成后触发
  input.addEventListener('change', function(e) {
    // 获取选择的文件
    var file = e.target.files[0];

    // 创建一个<img>元素，用于显示图像
    var img = document.createElement('img');

    // 创建一个FileReader对象，用于读取图像文件
    var reader = new FileReader();

    // 读取图像文件完成后触发load事件
    reader.onload = function(e) {
      // 将读取的图像数据赋值给<img>元素的src属性
      img.src = e.target.result;

      // 将<img>元素添加到页面中
      document.body.appendChild(img);
    };

    // 读取图像文件
    reader.readAsDataURL(file);
  });

  // 触发打开文件浏览器的操作
  input.click();
});