在输入类型=“文件”上取消事件

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

我找不到任何适用于所有浏览器和平台的事件。

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

我正在寻找一个纯粹的js解决方案，但也对jquery解决方案开放。

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

Answer 1

一些研究表明，在“文件选择”对话框窗口中无法检测何时选择“取消”。 您可以使用onchange或onblur来检查是否已选择文件或是否已将某些内容添加到输入value 。

这可能看起来像： https ： //jsfiddle.net/Twisty/j18td9cs/

HTML

 
 Select File:   Cancel   

JavaScript的

 var inputElement = document.getElementById("testFile"); var cancelButton = document.getElementById("pseudoCancel"); var numFiles = 0; inputElement.onclick = function(event) { var target = event.target || event.srcElement; console.log(target, "clicked."); console.log(event); if (target.value.length == 0) { console.log("Suspect Cancel was hit, no files selected."); cancelButton.onclick(); } else { console.log("File selected: ", target.value); numFiles = target.files.length; } } inputElement.onchange = function(event) { var target = event.target || event.srcElement; console.log(target, "changed."); console.log(event); if (target.value.length == 0) { console.log("Suspect Cancel was hit, no files selected."); if (numFiles == target.files.length) { cancelButton.onclick(); } } else { console.log("File selected: ", target.value); numFiles = target.files.length; } } inputElement.onblur = function(event) { var target = event.target || event.srcElement; console.log(target, "changed."); console.log(event); if (target.value.length == 0) { console.log("Suspect Cancel was hit, no files selected."); if (numFiles == target.files.length) { cancelButton.onclick(); } } else { console.log("File selected: ", target.value); numFiles = target.files.length; } } cancelButton.onclick = function(event) { console.log("Pseudo Cancel button clicked."); } 

我建议您自己取消或重置按钮，重置表单或清除输入中的值。

Answer 2

我遇到了问题，我在input type =“file”元素上单击了取消按钮，并希望该函数不执行任何操作。 如果选择了某些东西并且我点击了打开按钮，那么我希望我的function可以做一些事情。 该示例仅显示了该方法，我在打开后删除了对其执行的操作。 我输入了警报，因此您可以看到单击取消时没有从对话框返回的文件名。 这是我使用的方法，它很简单，但它的工作原理。

  function openFileOnClick(){ document.getElementById("fileSelector").value = ""; document.getElementById("fileSelector").files.length = 0; document.getElementById("fileSelector").click(); if(document.getElementById("fileSelector").files.length >= 1){ alert(document.getElementById("fileSelector").value); //Do something } else{ alert(document.getElementById("fileSelector").value); //Cancel button has been called. } }