输入类型=“文件"上的取消事件 [英] Cancel event on input type="file"

问题描述

我正在使用用于上传的标准文件输入，并且我正在寻找一种方法，当用户单击/点击取消"按钮(或退出)选择文件时，将函数附加到事件对话.

我找不到任何在所有浏览器和平台上都能一致运行的事件.

我已经阅读了这个问题的答案:捕获输入取消事件type=file 但它们不起作用，因为在大多数浏览器中取消选择文件对话框时不会触发更改事件.

我正在寻找纯 js 解决方案，但也对 jquery 解决方案持开放态度.

有人成功解决了这个问题吗?

解决方案

一些研究表明无法检测何时在文件选择"对话框窗口中选择了取消".您可以使用 onchange 或 onblur 来检查是否已选择文件或是否已将某些内容添加到输入 value.

这可能看起来像:https://jsfiddle.net/Twisty/j18td9cs/>

HTML

选择文件:<input type="file" name="test1" id="testFile"/><button type="reset" id="pseudoCancel">取消</表单>

JavaScript

var inputElement = document.getElementById("testFile");var cancelButton = document.getElementById("pseudoCancel");var numFiles = 0;inputElement.onclick = 函数(事件){var target = event.target ||event.srcElement;控制台日志(目标，点击.")；控制台日志(事件)；if (target.value.length == 0) {console.log("怀疑取消被点击，没有选择文件.");取消按钮.onclick();} 别的 {console.log("选择的文件:", target.value);numFiles = target.files.length;}}inputElement.onchange = 函数(事件){var target = event.target ||event.srcElement;控制台日志(目标，改变.")；控制台日志(事件)；if (target.value.length == 0) {console.log("怀疑取消被点击，没有选择文件.");if (numFiles == target.files.length) {取消按钮.onclick();}} 别的 {console.log("选择的文件:", target.value);numFiles = target.files.length;}}inputElement.onblur = 函数(事件){var target = event.target ||event.srcElement;控制台日志(目标，改变.")；控制台日志(事件)；if (target.value.length == 0) {console.log("怀疑取消被点击，没有选择文件.");if (numFiles == target.files.length) {取消按钮.onclick();}} 别的 {console.log("选择的文件:", target.value);numFiles = target.files.length;}}cancelButton.onclick = 函数(事件){console.log("伪取消按钮被点击.");}

我建议您制作自己的取消或重置按钮，以重置表单或清除输入中的值.

I am working with a standard file input for uploads, and I am looking for a way to attach a function to an event when the user clicks/hits enter on the "cancel" button (or escapes out from) the choose file dialog.

I can't find any events that work across all browsers and platforms consistently.

I've read the answers to this question: Capturing cancel event on input type=file but they don't work, as the change event doesn't fire in most browsers on canceling out of the choose file dialog.

I'm looking for a pure js solution, but open to jquery solutions as well.

Anyone solve this problem successfully?

解决方案

A bit of research indicates that there is no way to detect when Cancel is selected in the File Selection dialog window. You can use onchange or onblur to check if files have been selected or if something has been added to the input value.

This could look like: 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.");
}

I suggest making your own cancel or reset button that resets the form or clears the value from the input.

这篇关于输入类型=“文件"上的取消事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！