如何检测何时使用 JavaScript 在文件输入上单击取消？

本文介绍了用户尝试输入文件后上传文件失败的处理方法。它向用户提供文件未上传的状态。这在需要提交重要文件或应用程序需要该文件以实现其功能的情况下可能很有用。

注意：此方法最适用于 WebKit 浏览器，例如 Google Chrome 和 Safari。它可能无法与 Mozilla Firefox 一起可靠地工作。

例子：

HTML 代码：以下代码定义在页面的 HTML 中。

解释：

• 属性值type=”file”告诉用户输入的输入类型是文件。
• 属性值id=”theFile”用于使用 getElementById() 方法将 JavaScript 代码链接到它。
• 属性值onclick=”initialize()”用于指定用户单击输入时的函数调用。

JavaScript 代码：

javascript

// Get the file input element
var theFile = document.getElementById('theFile');
  
// Define a function to be called
// when the input is focused
function initialize() {
    document.body.onfocus = checkIt;
    console.log('initializing');
}
      
// Define a function to check if
// the user failed to upload file
function checkIt() {
    // Check if the number of files
    // is not zero
    if (theFile.value.length) {
      alert('Files Loaded');
    }
    // Alert the user if the number
    // of file is zero
    else {
      alert('Cancel clicked');
    }
    document.body.onfocus = null;
    console.log('checked');
}

initialize()函数：

• 创建变量theFile并使用其 id 选择输入元素。
• “document.body.onfocus = checkIt”行定义了当元素获得焦点时触发 onfocus 事件。

checkIt()函数说明：

• 当用户上传任何文件时，文件的长度是使用 File.value.length 属性找到的。当该值变为非零值时，条件得到满足并出现一个显示“已加载文件”的警告框。
• 当用户不上传文件时，文件的长度为零值。因此，条件未得到满足，并出现一个警告框，显示“已单击取消”。

完整代码：在本节中，我们将结合以上两段代码来检测何时单击文件输入取消。

  

    
    
  
    
        How to detect when cancel 
        is clicked on file input?
    

  

    
  
    
        // Get the file input element
        var theFile = 
            document.getElementById('theFile');
  
        // Define a function to be called
        // when the input is focused
        function initialize() {
            document.body.onfocus = checkIt;
            console.log('initializing');
        }
  
        // Define a function to check if
        // the user failed to upload file
        function checkIt() {
  
            // Check if the number of files
            // is not zero
            if (theFile.value.length) {
                alert('Files Loaded');
            }
              
            // Alert the user if the number
            // of file is zero
            else {
                alert('Cancel clicked');
            }
            document.body.onfocus = null;
            console.log('checked');
        }        
    

  

输出：

• 用户选择文件的文件输入：

• 当用户输入文件失败时发出警报：

• 成功上传后，文件名将按预期显示：