Javascript 取消输入类型上的事件="；文件"；

我正在使用标准文件输入进行上传，我正在寻找一种方法，当用户单击/点击“取消”按钮上的enter（或从“选择文件”对话框中退出）时，将函数附加到事件

我找不到任何能够在所有浏览器和平台上一致工作的事件

我已经阅读了这个问题的答案：但是它们不起作用，因为大多数浏览器在取消选择文件对话框时不会触发更改事件

我正在寻找一个纯js的解决方案，但也可以使用jquery解决方案

---

有人成功地解决了这个问题吗

一些研究表明，无法检测何时在“文件选择”对话框窗口中选择了“取消”。您可以使用

onchange

或

onblur

检查是否已选择文件或是否已向输入值

添加了内容

这可能看起来像：

HTML

<form>
  Select File:
  <input type="file" name="test1" id="testFile" />
  <button type="reset" id="pseudoCancel">
    Cancel
  </button>
</form>

我建议您自己制作“取消”或“重置”按钮，以重置表单或清除输入中的值
 我遇到了一个问题，我单击了input type=“file”元素上的cancel按钮，希望函数什么也不做。如果选择了某个对象，我单击了“打开”按钮，那么我希望我的函数执行某些操作。这个例子只显示了这个方法，我在它打开后去掉了我对它所做的事情。我加入了提醒，这样你就可以在单击“取消”时看到对话框中没有返回文件名。
这里有一个我使用的方法，它很简单，但很有效


函数openFileOnClick（）{
document.getElementById（“文件选择器”）.value=“”；
document.getElementById（“fileSelector”）.files.length=0；
document.getElementById（“文件选择器”）。单击（）；
if（document.getElementById（“fileSelector”）.files.length>=1）{
警报（document.getElementById（“fileSelector”）.value）；
//做点什么
}
否则{
警报（document.getElementById（“fileSelector”）.value）；
//取消按钮已被调用。
}
}

---

当我们选择文件时，将调用以下事件-

场景1:单击选择文件然后单击取消时

Focus

event value=“”

单击

事件值=“”

Blur

event value=“”

Focus

event value=“”

Blur

event value=“”（当用户点击某处时）

场景2:选择文件时-

Focus

event value=“”

单击

事件值=“”

Blur

event value=“”

Focus

event value=“”

Change

event value=“filevalue”

Blur

event value=“filevalue”

Focus

event value=“filevalue”

Blur

event value=“filevalue”（当用户单击某个位置时）

我们在这里看到，当在焦点事件之后调用模糊事件（最后一个事件）且没有file值时，意味着单击了取消按钮。

我的场景是在加载文件时将提交按钮文本更改为“请稍候” currentEvent变量用于保存当前事件值（单击或聚焦） 如果currentEvent=focus且文件值为null，则表示单击了取消按钮

Javascript
var currentEvent=“焦点”；
函数onFileBrowse（）{
var vtbFile=$（'#uploadFile'）[0]。文件[0]；
if（vtbFile！=未定义）{
var extension=vtbFile.name.split（'.'）.pop（）.toLowerCase（）；
var valeror=“”；
如果（扩展=='xlsx'| |扩展=='xlsb'| |扩展==='csv'）{
如果（vtbFile.size==0）
valError=“File'”+vtbFile.name+“'为空”；
}
其他的
不支持valeror=“Extension”“+Extension+”；
如果（Valeror！==“”）{
警报（“验证文件时出现问题。”+Valeror，20000）；
}        
}
//隐藏指示器
var buttonUpload=document.getElementById（'btnUploadTB'）；
buttonUpload.innerText=“提交”；
};
函数fileClick（）{
//显示指示器
var buttonUpload=document.getElementById（'btnUploadTB'）；
buttonUpload.innerText=“请稍候…”；
document.getElementById（'uploadFile'）。value=null；
currentEvent=“单击”；
}
函数fileFocus（）{
currentEvent=“焦点”；
}
函数fileBlur（）{
如果（！document.getElementById（'uploadFile'）。value&¤tEvent==“focus”）{
log（'blur'+'更改为submit'）；
//隐藏指示器
var buttonUpload=document.getElementById（'btnUploadTB'）；
buttonUpload.innerText=“提交”；
}
}

HTML
提交

我有一个完美的解决方案

焦点事件将在更改事件之前执行

因此，我需要使用setTimeout使focus方法的执行晚于change方法

const createUpload = () => {
    let lock = false
    return new Promise((resolve, reject) => {
        // create input file
        const el = document.createElement('input')
        el.id = +new Date()
        el.style.display = 'none'
        el.setAttribute('type', 'file')
        document.body.appendChild(el)

        el.addEventListener('change', () => {
            lock = true
            const file = el.files[0]
            
            resolve(file)
            // remove dom
            document.body.removeChild(document.getElementById(el.id))
        }, { once: true })

        // file blur
        window.addEventListener('focus', () => {
            setTimeout(() => {
                if (!lock && document.getElementById(el.id)) {
                    reject(new Error('onblur'))
                    // remove dom
                    document.body.removeChild(document.getElementById(el.id))
                }
            }, 300)
        }, { once: true })

        // open file select box
        el.click()
    })
}



try {
    const file = createUpload()
    console.log(file)
} catch(e) {
    console.log(e.message) // onblur
}

---

在使用jQuery实现了图像上传表单的自动提交之后，我也遇到了类似的问题。如果用户取消了对话，则会发送一条空白消息。只需在同一脚本中检测此空值：

$('#upload-portrait-input').on('change', function(){
   if ( $(this).val() != '' )
    {
    $('#portraitForm').submit();
    }
   else { // do something when the user clicks cancel
    }
 });

由于并非所有浏览器都执行

.change（）

，因此应该查找调用的事件。您是否特别希望使用他们的浏览器？在FF中，对其进行了一些测试，因为“取消”是浏览器对话框的元素，所以我只能检查是否选择了文件。我注意到，如果我选择了一个文件，然后第二次浏览，并点击“取消”，它将保留文件值。。。所以这在这里没有帮助。可以在页面中创建自己的取消按钮。尝试查看选择“取消”时是否更新或返回内容，如使用

confirm（）

$('#upload-portrait-input').on('change', function(){
   if ( $(this).val() != '' )
    {
    $('#portraitForm').submit();
    }
   else { // do something when the user clicks cancel
    }
 });