捕获输入类型=文件的取消事件

drdozer
2012-04-13  
13354  
    
4  

我有一个使用文件 API 的 html5 应用程序，它使用一个元素。当用户选择文件时，我能够做出响应。如果用户取消文件选择，我希望能够做一些事情。但是，如果用户单击文件选择器对话框中的取消而不是确定按钮，我找不到在输入元素上触发的事件。

是否有一些在“取消”时触发的事件我错过了，或者我应该重新构建我的应用程序以不需要这个？

html
stack overflow Capturing cancel event on input type=file
原文答案

答案:

作者头像
E-D
2014-01-18    3      原文

当用户单击取消时，更改事件再次触发。那对我有用；

        $('#attachedFiles').bind("change", function () {
            var file = this.files[0];
            if (file) {
                // if file selected, do something
            } else {
                // if user clicks 'Cancel', do something
            }
        });
作者头像
Chad Adams
2013-02-11    0      原文

没有真正的侦听器来检查是否选择了文件，您可以通过使用 on change 事件在代码中设置注释来绕过它，如下所示：

var FileChoosen = false;

var inputElement = document.getElementById("inputField");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  var fileList = this.files; /* now you can work with the file list */

  //Check if the layout was changed from file API:
  if(document.getElementById('fileOutput').innerHTML != "") {
    FileChoosen = true;
    setTimeout("funcCalledToCheckUserSelection()", 500);
  };

}
作者头像
H.C.Chen
2016-05-09    0      原文

我有同样的问题，解决方案非常简单......至少在我的情况下，如果用户单击文件选择器对话框中的 [取消] 按钮，NW.js (Node-Webkit) 会触发 oncancel 事件。如果您也在使用 NW.js（process.version 为 v5.11.0），则可以使用这种简单且原生的方式。

我还在 Windows 10 上尝试了 Microsoft HTA，它不会触发 oncancel 事件。

相关问题

标签