我正在使用标准文件输入进行上传，我正在寻找一种方法，当用户点击/点击“取消”按钮（或从“退出”）选择文件对话框时，将功能附加到事件。
我无法找到任何适用于所有浏览器和平台的事件。
我已经阅读了这个问题的答案：Capturing cancel event on input type=file但它们不起作用，因为更改事件在大多数浏览器中都没有触发取消选择文件对话框。
我正在寻找一个纯粹的js解决方案，但也对jquery解决方案开放。
有人成功解决了这个问题吗
一些研究表明，在“文件选择”对话框窗口中无法检测何时选择“取消”。您可以使用onchange或onblur来检查文件是否已被选中或是否已将某些内容添加到输入value。
这可能看起来像：https://jsfiddle.net/Twisty/j18td9cs/
HTML
<form>
Select File:
<input type="file" name="test1" id="testFile" />
<button type="reset" id="pseudoCancel">
Cancel
</button>
</form>
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.");
}
我建议您自己取消或重置按钮，重置表单或清除输入中的值。
我遇到了问题，我在input type =“file”元素上单击了取消按钮，并希望该函数不执行任何操作。如果选择了某些东西并且我点击了打开按钮，那么我希望我的功能可以做一些事情。该示例仅显示了该方法，我在打开后删除了对其执行的操作。我输入了警报，因此您可以看到单击取消时没有从对话框返回的文件名。这是我使用的方法，它很简单，但它的工作原理。
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.
}
}<html>
<head>
</head>
<body>
<input type="file" id="fileSelector" name="fileSelector" value="" style="display:none;" />
<input type="button" value="Open File" name="openFile" onclick="openFileOnClick();" />
</body>
</html>