Question

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

是否有一些事件被“取消”触发，我错过了，或者我应该重新设计我的应用程序而不需要它？

Answer 1

当用户点击取消时，再次更改事件触发器。这对我有用;

        $('#attachedFiles').bind("change", function () {
            var file = this.files[0];
            if (file) {
                // if file selected, do something
            } else {
                // if user clicks 'Cancel', do something
            }
        });

Answer 2

没有真正的侦听器来检查文件是否被选中，您可以通过使用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);
  };


}

Answer 3

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

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

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

3 个答案: