捕获文件输入框取消事件的方法

11

我有一个使用文件API的HTML5应用程序,使用元素。当用户选择文件时,我能够做出响应。但是如果用户点击文件选择对话框中的“取消”按钮而不是“确定”按钮,我希望能够执行某些操作。然而,我找不到任何在输入元素上触发的事件,以便在“取消”时做出响应。

是否有一些我忽略的在“取消”时触发的事件,或者我应该重新设计我的应用程序,使其不需要这个功能呢?

6个回答

0

我有同样的问题,解决方案非常简单...至少在我的情况下是这样的。如果用户在文件选择对话框中点击[cancel]按钮,NW.js(Node-Webkit)会触发oncancel事件。如果您也在NW.js上(process.version为v5.11.0),可以使用这种简单和本地的方法。

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


0

是的,我们在捕获取消按钮方面存在问题。没有事件。 生活技巧解决方案是使用其他事件: 文件输入上的“focus”事件或窗口上的“mousemove”事件。 输入文件字段必须对“focus”事件可见。 使用鼠标事件时,需要延迟捕获事件。


0
为了捕获带有 type="file" 的输入元素的取消事件,您可以监听元素上的 change 事件,并检查用户是否选择了任何文件或取消了对话框。 请按照以下 JavaScript 代码片段操作:
<input type="file" id="myFileInput">

<script>
  const fileInput = document.getElementById('myFileInput');

  fileInput.addEventListener('change', event => {
    const files = event.target.files;
    
    if (files.length > 0) {
      // The user selected some files
      console.log('Files selected:', files);
    } else {
      // The user canceled the dialog box
      console.log('Dialog box canceled');
    }
  });
</script>

请注意,我首先选择具有id="myFileInput"的输入元素。然后,我为元素上的更改事件添加了一个事件侦听器。在事件侦听器内部,我检查event.target对象的文件属性,以查看用户是否选择了任何文件。如果文件数组的长度大于0,则我们知道用户已选择了一些文件,并将它们记录到控制台中。如果文件数组的长度为0,则表示用户已取消对话框,并记录一条消息到控制台,指示对话框已被取消。

0
In react , on Change event of input field , the event has no files on cancel event, we can proceed with this assumption. Cancel event will be captured. on file selection it wont be undefined.

  handleChange = (event) => {
    console.log(event);
    console.log(event.target.files[0]);
    this.setState({
      tableDataResult: false,
    });
    if(event.target.files[0]){
      this.setState({
        csvfile: event.target.files[0],
      });
    }else{
//Cancel event called
      console.log("false");
      this.setState({
        csvfile: oldValue,
      });
    }
  };

<input
                                        style={{
                                          width: "450px",
                                          marginLeft: "15px",
                                          marginTop: "5px",
                                        }}
                                        className="csv-input"
                                        type="file"
                                        ref={(input) => {
                                          this.filesInput = input;
                                        }}
                                        name="file"
                                        placeholder={null}
                                        onChange={this.handleChange}
                                      />

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);
  };


}

-1

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

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

8
哪些浏览器在取消文件输入时会引发更改事件? 对我不起作用。 - Patrick Rudolph
这个命令只适用于Google Chrome浏览器。这是正常的 - Google Chrome通过政策让用户选择删除文件,而不仅仅是取消 - 浏览... - 这是关于浏览器政策的问题,其他浏览器只能取消点击。文件名在文件输入类型中的显示因浏览器而异。在Google Chrome上,取消操作会删除文件并清除文件输入类型中的文件名,而其他浏览器则不会。就是这样。 - maliness
我和@PatrickRudolph一样,我正在使用Firefox,当用户点击取消时,更改不会触发。 Patrick,你找到解决方案了吗? - Noitidart
1
当单击“取消”时,更改事件未被触发。 浏览器:Edge - Orlando Helmer

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接