如何实现上传图片前弹出Modal，关闭弹窗后触发文件输入

问题描述：点击class为open-button的文件输入框时，会同时弹出浏览器默认的文件选择窗口和自定义提示Modal，需要调整为先弹出Modal提示，关闭Modal后再唤起文件选择窗口。

修改后的代码 #

HTML（整理冗余标签后）

<input class="open-button" type="file" accept="image/png, image/jpeg">
<button>Send</button>
</form>
<dialog class="modal" id="modal">
  <h2>Hello</h2>
  <p>This is a modal</p>
  <button class="button close-button">Proceed</button>
</dialog>

<footer></footer>

JavaScript

const modal = document.querySelector('.modal');
const openModal = document.querySelector('.open-button');
const closeModal = document.querySelector('.close-button');

openModal.addEventListener('click', (e) => {
    // 阻止文件输入框的默认文件选择行为
    e.preventDefault();
    modal.showModal();
});

// 监听Modal关闭事件，关闭后触发文件选择
modal.addEventListener('close', () => {
    // 手动触发文件输入框的点击，唤起文件选择窗口
    openModal.click();
});

closeModal.addEventListener('click', () => {
    modal.close();
});

关键逻辑说明 #

1. 拦截默认行为：在文件输入框的点击事件中调用e.preventDefault()，直接阻止浏览器弹出默认文件选择窗口，只触发自定义Modal的显示。
2. Modal关闭后触发选择：监听Modal的close事件（覆盖所有关闭场景：点击按钮、按ESC键），在Modal彻底关闭后，手动调用文件输入框的click()方法，唤起文件选择窗口。
3. 安全合规性：由于文件选择触发是在用户主动关闭Modal的交互之后，不会被浏览器的安全策略拦截，确保功能稳定运行。

内容的提问来源于stack exchange，提问作者Themarsh