模拟input file 文件框“取消”按钮事件

问题描述

某些情况我们会通过input file 创建文件上传的功能，但是当我们想在文件框“取消”时做一些处理，会发现无法获取“取消”按钮事件，由于取消没有选中文件也就不会触发input的change事件，那这种情况该怎么办？

代码片段

解决方案

通过input file 打开系统文件框时，类似alter方法会阻塞js代码运行，也就是说无论是change事件还是别的在打开文件框之后的事件，都重要在我们点击确认或者取消后才能执行，所以可以通过采取为当前window添加focus事件的方式来模拟取消事件，只要控制这个focus事件在change事件之后执行，就可以通过设置一个变量和setTimeout方法实现，如下所示：

代码片段

代码示例：

function fileUpload() {
    let fileCancle = true // 文件夹“取消”事件是否可用
    const inputFile = document.createElement('input')
    inputFile.type = 'file'
    inputFile.multiple = true
    inputFile.style = 'display: none;'
    // 触发点击事件
    inputFile.click()
    // 模拟取消事件
    window.addEventListener(
      'focus',
      () => {
        setTimeout(() => {
          if (fileCancle) {
            // 取消逻辑处理
            console.log('取消了，我要处理一些事情了')
          }
        }, 100)
      },
      { once: true }
    )

    // 监听文件change事件
    inputFile.onchange = function() {
      fileCancle = false
      // 正常逻辑处理
      console.log('选中了文件，我要处理一些事情了')
    }
  }

参考文档
# Cancel event on input type=“file”