HTMLInputElement: событие cancel

Событие cancel срабатывает на элементе <input>, когда пользователь отменяет диалоговое окно выбора файла с помощью клавиши Esc или кнопки отмены, а также при повторном выборе тех же файлов, что были выбраны ранее type="file".

Это событие не может быть отменено, но может распространяться.

Используйте имя события в методах, таких как addEventListener(), или задайте обработчик события.

addEventListener("cancel", (event) => {});

oncancel = (event) => {};

Общее Event.

HTML

<label for="file">Select a file. Or don't.</label>
<input type="file" id="file" name="file" />

<div id="result"></div>

JavaScript

const elem = document.getElementById("file");

const result = document.getElementById("result");

elem.addEventListener("cancel", () => {
  result.textContent = "Canceled.";
});

elem.addEventListener("change", () => {
  if (elem.files.length == 1) {
    result.textContent = "File Selected.";
  }
});

Результат

Откройте селектор файлов, затем закройте диалоговое окно выбора с помощью клавиши Esc или кнопки отмены. В обоих случаях произойдёт срабатывание события cancel. Также попробуйте выбрать локальный файл на вашем компьютере, затем снова откройте окно выбора файлов и выберите тот же файл. Это также вызовет событие cancel.

• Элемент HTML <input>