如何使用javascript通过单击从图库中选择和取消选择图像

<button id="imageSelector">选择图像</button>
<img id="imagePreview" src="" alt="图像预览">

const imageSelector = document.getElementById('imageSelector');
imageSelector.addEventListener('click', selectImage);

function selectImage() {
  // 创建一个input元素，用于选择图像文件
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*';
  
  // 添加change事件监听器，当选择图像文件后触发
  input.addEventListener('change', handleImageSelection);
  
  // 模拟点击input元素，打开文件选择对话框
  input.click();
}

function handleImageSelection(event) {
  const file = event.target.files[0];
  
  // 使用FileReader读取图像文件
  const reader = new FileReader();
  reader.onload = function(e) {
    const imagePreview = document.getElementById('imagePreview');
    imagePreview.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

<button id="cancelSelection">取消选择</button>

const cancelSelection = document.getElementById('cancelSelection');
cancelSelection.addEventListener('click', cancelImageSelection);

function cancelImageSelection() {
  const imagePreview = document.getElementById('imagePreview');
  imagePreview.src = '';
}