如何检测文件输入何时单击取消？

Question

如何检测用户何时使用 html 文件输入取消文件输入？

onChange 让我检测他们何时选择文件，但我也想知道他们何时取消（关闭文件选择对话框而不选择任何内容）。

Answer 1

如果 Shiboe 的解决方案适用于移动 webkit，那么它会是一个很好的解决方案，但事实并非如此。我能想到的是在文件输入窗口打开时向某个 dom 对象添加一个 mousemove 事件监听器，如下所示：

 $('.upload-progress').mousemove(function() {
        checkForFiles(this);
      });
      checkForFiles = function(me) {
        var filefield = $('#myfileinput');
        var files = filefield.get(0).files;
        if (files == undefined || files[0] == undefined) $(me).remove(); // user cancelled the upload
      };

当文件对话框打开时以及关闭时，mousemove 事件会被页面阻止检查文件输入中是否有任何文件。就我而言，我想要一个活动指示器阻止事情直到文件上传，所以我只想在取消时删除我的指示器。

然而，这并不能解决移动设备的问题，因为没有鼠标可以移动。我的解决方案并不完美，但我认为它已经足够好了。

       $('.upload-progress').bind('touchstart', function() {
        checkForFiles(this);
      });

现在我们正在监听屏幕上的触摸来执行相同的文件检查。我非常有信心，在取消并关闭此活动指示器后，用户的手指将很快放在屏幕上。

人们还可以在文件输入更改事件上添加活动指示器，但在移动设备上，选择图像和更改事件触发之间通常会有几秒钟的延迟，因此将活动指示器显示在文件输入更改事件上会带来更好的用户体验。该过程的开始。

Answer 2

我发现这个属性，它是最简单的。

if ($('#selectedFile')[0].files.length > 1)
{
   // Clicked on 'open' with file
} else {
   // Clicked on 'cancel'
}

这里，selectedFile 是一个input type=file。

Answer 3

我知道这是一个非常古老的问题，但为了防止它对某人有帮助，我发现在使用 onmousemove 事件来检测取消时，有必要在短时间内测试两个或多个此类事件。
这是因为每次将光标移出选择文件对话框窗口以及每次移出主窗口并返回时，浏览器 (Chrome 65) 都会生成单个 onmousemove 事件。
鼠标移动事件的简单计数器加上将计数器重置为零的短持续时间超时，效果很好。

Answer 4

结合 Shiboe 和 alx 的解决方案，我得到了最可靠的代码：

var selector = $('<input/>')
   .attr({ /* just for example, use your own attributes */
      "id": "FilesSelector",
      "name": "File",
      "type": "file",
      "contentEditable": "false" /* if you "click" on input via label, this prevents IE7-8 from just setting caret into file input's text filed*/
   })
   .on("click.filesSelector", function () {
      /* do some magic here, e.g. invoke callback for selection begin */
      var cancelled = false; /* need this because .one calls handler once for each event type */
      setTimeout(function () {
         $(document).one("mousemove.filesSelector focusin.filesSelector", function () {
            /* namespace is optional */
            if (selector.val().length === 0 && !cancelled) {
               cancelled = true; /* prevent double cancel */
               /* that's the point of cancel,   */
            }
         });                    
      }, 1); /* 1 is enough as we just need to delay until first available tick */
   })
   .on("change.filesSelector", function () {
      /* do some magic here, e.g. invoke callback for successful selection */
   })
   .appendTo(yourHolder).end(); /* just for example */

通常， mousemove 事件可以解决问题，但如果用户单击了鼠标，则：

• 通过转义键取消文件打开对话框（无需移动鼠标），再进行一次准确的操作单击再次打开文件对话框...
• 将焦点切换到任何其他应用程序，然后返回浏览器的文件打开对话框并关闭它，然后通过 Enter 或空格键再次打开......

因此我们不会收到 mousemove 事件没有取消回调。此外，如果用户取消第二个对话框并移动鼠标，我们将收到 2 个取消回调。
幸运的是，在这两种情况下，特殊的 jQuery focusIn 事件都会冒泡到文档中，帮助我们避免这种情况。唯一的限制是如果其中之一阻止 focusIn 事件。

Answer 5

我发现我的回应已经相当过时了，但仍然如此。
我面临着同样的问题。这是我的解决方案。
被截断的最有用的代码是 KGA 的代码。但它并不完全有效，而且有点复杂。但我把它简化了。

另外，主要的麻烦在于，“改变”事件在焦点之后不会立即发生，所以我们必须等待一段时间。

“#appendfile” - 用户单击该按钮来追加新文件。
Href 获取焦点事件。

$("#appendfile").one("focusin", function () {
    // no matter - user uploaded file or canceled,
    // appendfile gets focus
    // change doesn't come instantly after focus, so we have to wait for some time
    // wrapper represents an element where a new file input is placed into
    setTimeout(function(){
        if (wrapper.find("input.fileinput").val() != "") {
            // user has uploaded some file
            // add your logic for new file here
        }
        else {
            // user canceled file upload
            // you have to remove a fileinput element from DOM
        }
    }, 900);
});

Answer 6

您只能在有限的情况下检测到这一点。具体来说，在 Chrome 中，如果之前选择了文件，然后单击文件对话框并单击取消，Chrome 会清除该文件并触发 onChange 事件。

https://code.google.com/p/chromium/issues/detail ?id=2508

在这种情况下，您可以通过处理 onChange 事件并检查 files 属性来检测这一点。

Answer 7

这充其量只是hacky，但这是我的解决方案的一个工作示例，用于检测是否用户已上传文件，并且仅允许他们在上传文件后继续。

基本上隐藏 Continue、Save、Proceed 或任何按钮。然后在 JavaScript 中获取文件名。如果文件名没有值，则不显示继续按钮。如果它确实有值，则显示按钮。如果他们首先上传文件，然后尝试上传不同的文件并单击“取消”，这也适用。

这是代码。

HTML：

<div class="container">
<div class="row">
    <input class="file-input" type="file" accept="image/*" name="fileUpload" id="fileUpload" capture="camera">
    <label for="fileUpload" id="file-upload-btn">Capture or Upload Photo</label>
</div>
<div class="row padding-top-two-em">
    <input class="btn btn-success hidden" id="accept-btn" type="submit" value="Accept & Continue"/>
    <button class="btn btn-danger">Back</button>
</div></div>

JavaScript：

$('#fileUpload').change(function () {
    var fileName = $('#fileUpload').val();
    if (fileName != "") {
        $('#file-upload-btn').html(fileName);
        $('#accept-btn').removeClass('hidden').addClass('show');
    } else {
        $('#file-upload-btn').html("Upload File");
        $('#accept-btn').addClass('hidden');
    }
});

CSS：

.file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1; 
}

.file-input + label {
    font-size: 1.25em;
    font-weight: normal;
    color: white;
    background-color: blue;
    display: inline-block;
    padding: 5px;
}

.file-input:focus + label,
.file-input + label:hover {
    background-color: red;
}

.file-input + label {
    cursor: pointer;
}

.file-input + label * {
    pointer-events: none;
}

对于 CSS，这很大程度上是为了让每个人都可以访问网站和按钮。将按钮设计成您喜欢的任何样式。

Answer 8

以下内容似乎对我有用（在桌面、Windows 上）：

var openFile = function (mimeType, fileExtension) {
    var defer = $q.defer();
    var uploadInput = document.createElement("input");
    uploadInput.type = 'file';
    uploadInput.accept = '.' + fileExtension + ',' + mimeType;

    var hasActivated = false;

    var hasChangedBeenCalled = false;
    var hasFocusBeenCalled = false;
    var focusCallback = function () {
        if (hasActivated) {
            hasFocusBeenCalled = true;
            document.removeEventListener('focus', focusCallback, true);
            setTimeout(function () {
                if (!hasChangedBeenCalled) {
                    uploadInput.removeEventListener('change', changedCallback, true);
                    defer.resolve(null);
                }
            }, 300);
        }
    };

    var changedCallback = function () {
        uploadInput.removeEventListener('change', changedCallback, true);
        if (!hasFocusBeenCalled) {
            document.removeEventListener('focus', focusCallback, true);
        }
        hasChangedBeenCalled = true;
        if (uploadInput.files.length === 1) {
            //File picked
            var reader = new FileReader();
            reader.onload = function (e) {
                defer.resolve(e.target.result);
            };
            reader.readAsText(uploadInput.files[0]);
        }
        else {
            defer.resolve(null);
        }
    };
    document.addEventListener('focus', focusCallback, true); //Detect cancel
    uploadInput.addEventListener('change', changedCallback, true); //Detect when a file is picked
    uploadInput.click();
    hasActivated = true;
    return defer.promise;
}

这确实使用 angularjs $q 但如果需要，您应该能够将其替换为任何其他承诺框架。

在 IE11、Edge、Chrome、Firefox 上进行了测试，但它似乎不适用于 Android 平板电脑上的 Chrome，因为它不会触发 Focus 事件。

Answer 9

令人沮丧的是，file 类型字段无法响应很多事件（模糊会很可爱）。我看到很多人建议以变革为导向的解决方案，但遭到了否决。

change 确实有效，但它有一个重大缺陷（与我们希望发生的情况相比）。

当您新加载包含文件字段的页面时，打开该框并按取消。令人沮丧的是，什么都没有改变。

我选择做的是在门控状态下加载。

• 在我的例子中，表单的下一部分是隐藏在视图中的。当我的文件字段更改时，会显示上传按钮。成功上传后，将显示 section#after-image。
• 如果用户加载、打开文件对话框，然后取消，他们将永远不会看到上传按钮。
• 如果用户选择文件，则会显示上传按钮。如果他们随后打开对话框并取消，则此取消会触发 change 事件，我可以（并且确实）重新隐藏我的上传按钮，直到选择正确的文件。

我很幸运，这种门控状态已经是我表单的设计。您不需要使用相同的样式，只需将上传按钮最初隐藏起来，并在更改后将隐藏字段或 JavaScript 变量设置为您可以在提交时监视的内容。

我尝试在与字段交互之前更改 files[0] 的值。这对 onchange 没有做任何事情。

所以，是的，change 有效，至少和我们想要的一样好。出于显而易见的原因，文件字段是安全的，但令善意的开发人员感到沮丧。

这不符合我的目的，但您也许可以，onclick，加载警告提示（不是 alert()，因为这会停止页面处理），并且如果触发更改且 files[0] 为 null，则隐藏它。如果未触发更改，则 div 保持其状态。

Answer 10

使用隐藏输入选择文件的解决方案

注意：此代码不会检测取消，它提供了一种方法来避免在人们尝试检测它的常见情况下检测它。

我在寻找使用隐藏输入的文件上传解决方案时来到这里，我相信这是寻找一种检测文件输入取消的方法的最常见原因（打开文件对话框 -> 如果选择了文件然后运行一些代码，否则什么都不做），这是我的解决方案：

var fileSelectorResolve;
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');

fileSelector.addEventListener('input', function(){
   fileSelectorResolve(this.files[0]);
   fileSelectorResolve = null;
   fileSelector.value = '';
});

function selectFile(){
   if(fileSelectorResolve){
      fileSelectorResolve();
      fileSelectorResolve = null;
   }
   return new Promise(function(resolve){
      fileSelectorResolve = resolve;
      fileSelector.dispatchEvent(new MouseEvent('click'));
   });
}

使用示例：

请注意，如果没有选择文件，那么第一行将仅在再次调用 selectFile() 时返回（或者如果您调用fileSelectorResolve()）。

async function logFileName(){
   const file = await selectFile();
   if(!file) return;
   console.log(file.name);
}

另一个例子：

async function uploadFile(){
   const file = await selectFile();
   if(!file) return;

   // ... make an ajax call here to upload the file ...
}

Answer 11

我发现这个问题 https://github.com/whatwg/html/pull/6735 由 https://github.com/WebKit/WebKit/pull/4986 合并到 WebKit 中

HTMLDialogElement 还实现了取消事件：
https://developer.mozilla.org/en-US/docs/ Web/API/HTMLDialogElement

下面是一个带有更改和取消事件监听的示例代码：
https://stackblitz.com/edit/js-lzmne4

Answer 12

有一种黑客方法可以做到这一点（添加回调或解决一些延迟/承诺实现，而不是 alert() 调用）：

var result = null;

$('<input type="file" />')
    .on('change', function () {
        result = this.files[0];
        alert('selected!');
    })
    .click();

setTimeout(function () {
    $(document).one('mousemove', function () {
        if (!result) {
            alert('cancelled');
        }
    });
}, 1000);

它是如何工作的：当文件选择对话框打开时，文档不接收鼠标指针事件。有 1000 毫秒的延迟让对话框实际出现并阻止浏览器窗口。在 Chrome 和 Firefox（仅限 Windows）中检查。

但这当然不是检测取消对话的可靠方法。不过，可能会为您改进一些 UI 行为。

Answer 13

这是我的解决方案，使用文件输入焦点（不使用任何计时器）

var fileInputSelectionInitiated = false;

function fileInputAnimationStart() {
    fileInputSelectionInitiated = true;
    if (!$("#image-selector-area-icon").hasClass("fa-spin"))
        $("#image-selector-area-icon").addClass("fa-spin");
    if (!$("#image-selector-button-icon").hasClass("fa-spin"))
        $("#image-selector-button-icon").addClass("fa-spin");
}

function fileInputAnimationStop() {
    fileInputSelectionInitiated = false;
    if ($("#image-selector-area-icon").hasClass("fa-spin"))
        $("#image-selector-area-icon").removeClass("fa-spin");
    if ($("#image-selector-button-icon").hasClass("fa-spin"))
        $("#image-selector-button-icon").removeClass("fa-spin");
}

$("#image-selector-area-wrapper").click(function (e) {
    $("#fileinput").focus();
    $("#fileinput").click();
});

$("#preview-image-wrapper").click(function (e) {
    $("#fileinput").focus();
    $("#fileinput").click();
});

$("#fileinput").click(function (e) {
    fileInputAnimationStart();
});

$("#fileinput").focus(function (e) {
    fileInputAnimationStop();
});

$("#fileinput").change(function(e) {
    // ...
}

Answer 14

嗯，这并不能完全回答你的问题。我的假设是，您有一个场景，当您添加文件输入并调用文件选择时，如果用户点击取消，您只需删除输入。

如果是这样的话：为什么要添加空文件输入呢？

动态创建一个，但仅在填充时将其添加到 DOM。就像这样：

    var fileInput = $("<input type='file' name='files' style='display: none' />");
    fileInput.bind("change", function() {
        if (fileInput.val() !== null) {
            // if has value add it to DOM
            $("#files").append(fileInput);
        }
    }).click();

所以在这里我创建了 即时绑定到它的更改事件，然后立即调用单击。仅当用户选择文件并单击“确定”时才会触发“更改”，否则输入将不会添加到 DOM，因此不会提交。

此处的工作示例： https://jsfiddle.net/69g0Lxno/3/

Answer 15

//使用悬停而不是模糊

var fileInput = $("#fileInput");

if (fileInput.is(":hover") { 

    //open
} else {

}

Answer 16

function file_click() {
    document.body.onfocus = () => {
        setTimeout(_=>{
            let file_input = document.getElementById('file_input');
            if (!file_input.value) alert('please choose file ')
            else alert(file_input.value)
            document.body.onfocus = null
        },100)
    }
}

使用setTimeout来获取输入的特定值。

Answer 17

如果您已经需要 JQuery，则此解决方案可能会完成工作（这与我在本例中实际需要的代码完全相同，尽管使用 Promise 只是强制代码等待直到文件选择已解决）：

await new Promise(resolve => {
    const input = $("<input type='file'/>");
    input.on('change', function() {
        resolve($(this).val());
    });
    $('body').one('focus', '*', e => {
        resolve(null);
        e.stopPropagation();
    });
    input.click();

});

Answer 18

该线程中提出了几种解决方案，而难以检测用户何时单击文件选择框上的“取消”按钮是影响很多人的问题。

事实是，没有 100% 可靠的方法来检测用户是否单击了文件选择框上的“取消”按钮。但是有一些方法可以可靠地检测用户是否已将文件添加到输入文件。所以这就是本次回答的基本策略！

我决定添加这个答案，因为显然其他答案不适用于大多数浏览器或保证在移动设备上。

简而言之，代码基于 3 点：

1. 输入文件最初是在 js 的“内存”中动态创建的
   （目前我们不将其添加到“HTML”中）；
2. 添加文件后，输入文件将被添加到 HTML 中，否则什么也不会发生；
3. 文件的删除是通过从文件中删除输入文件来完成的
   HTML 通过特定的事件，这意味着
   文件的“编辑”/“修改”是通过删除旧的来完成的
   输入文件并创建一个新文件。

为了更好地理解，请查看下面的代码和注释。

[...]
<button type="button" onclick="addIptFl();">ADD INPUT FILE!</button>
<span id="ipt_fl_parent"></span>
[...]

function dynIptFl(jqElInst, funcsObj) {
    if (typeof funcsObj === "undefined" || funcsObj === "") {
        funcsObj = {};
    }
    if (funcsObj.hasOwnProperty("before")) {
        if (!funcsObj["before"].hasOwnProperty("args")) {
            funcsObj["before"]["args"] = [];
        }
        funcsObj["before"]["func"].apply(this, funcsObj["before"]["args"]);
    }
    var jqElInstFl = jqElInst.find("input[type=file]");

    // NOTE: Open the file selection box via js. By Questor
    jqElInstFl.trigger("click");

    // NOTE: This event is triggered if the user selects a file. By Questor
    jqElInstFl.on("change", {funcsObj: funcsObj}, function(e) {

        // NOTE: With the strategy below we avoid problems with other unwanted events
        // that may be associated with the DOM element. By Questor
        e.preventDefault();

        var funcsObj = e.data.funcsObj;
        if (funcsObj.hasOwnProperty("after")) {
            if (!funcsObj["after"].hasOwnProperty("args")) {
                funcsObj["after"]["args"] = [];
            }
            funcsObj["after"]["func"].apply(this, funcsObj["after"]["args"]);
        }
    });

}

function remIptFl() {

    // NOTE: Remove the input file. By Questor
    $("#ipt_fl_parent").empty();

}

function addIptFl() {

    function addBefore(someArgs0, someArgs1) {
    // NOTE: All the logic here happens just before the file selection box opens.
    // By Questor

        // SOME CODE HERE!

    }

    function addAfter(someArgs0, someArgs1) {
    // NOTE: All the logic here happens only if the user adds a file. By Questor

        // SOME CODE HERE!

        $("#ipt_fl_parent").prepend(jqElInst);

    }

    // NOTE: The input file is hidden as all manipulation must be done via js.
    // By Questor
    var jqElInst = $('\
<span>\
    <button type="button" onclick="remIptFl();">REMOVE INPUT FILE!</button>\
    <input type="file" name="input_fl_nm" style="display: block;">\
</span>\
');

    var funcsObj = {
        before: {
            func: addBefore,
            args: [someArgs0, someArgs1]
        },
        after: {
            func: addAfter,

            // NOTE: The instance with the input file ("jqElInst") could be passed
            // here instead of using the context of the "addIptFl()" function. That
            // way "addBefore()" and "addAfter()" will not need to be inside "addIptFl()",
            // for example. By Questor
            args: [someArgs0, someArgs1]

        }
    };
    dynIptFl(jqElInst, funcsObj);

}

谢谢！ =D

Answer 19

虽然不是一个直接的解决方案，而且也不好，因为它只能（据我测试）与 onfocus 一起工作（需要相当有限的事件阻止），您可以通过以下方式实现它：

document.body.onfocus = function(){ /*rock it*/ }

这个的好处是，您可以与文件事件一起及时附加/分离它，并且它似乎也可以很好地处理隐藏输入（如果您对蹩脚的默认输入类型=“文件”使用视觉解决方法，那么这是一个明确的好处）。之后，您只需要弄清楚输入值是否发生变化。

示例：

var godzilla = document.getElementById('godzilla')

godzilla.onclick = charge

function charge()
{
    document.body.onfocus = roar
    console.log('chargin')
}

function roar()
{
    if(godzilla.value.length) alert('ROAR! FILES!')
    else alert('*empty wheeze*')
    document.body.onfocus = null
    console.log('depleted')
}

查看实际操作： http://jsfiddle.net/Shiboe/yuK3r/6/

遗憾的是，它似乎只适用于 webkit 浏览器。也许其他人可以找出 firefox/IE 解决方案

Answer 20

因此，自从我提出了一个新颖的解决方案以来，我将彻底解决这个问题。我有一个渐进式网络应用程序，允许用户捕获照片和视频并上传它们。我们尽可能使用 WebRTC，但对于支持较少的设备，我们会使用 HTML5 文件选择器*咳嗽 Safari 咳嗽*。 如果您专门开发使用本机相机直接捕获照片/视频的 Android/iOS 移动网络应用程序，那么这是我遇到的最佳解决方案。

这个问题的关键是当页面加载时，file 为 null，但是当用户打开对话框并按“取消”时，file 仍为 null null，因此它没有“更改”，因此不会触发“更改”事件。对于台式机来说，这还不算太糟糕，因为大多数桌面 UI 并不依赖于知道何时调用取消，但调出相机来捕获照片/视频的移动 UI 非常依赖于知道何时按下取消键。

我最初使用 document.body.onfocus 事件来检测用户何时从文件选择器返回，这适用于大多数设备，但 iOS 11.3 破坏了它，因为该事件未触发。

概念

我对此的解决方案是“颤抖”，测量 CPU 时序以确定页面当前是在前台还是后台。在移动设备上，处理时间分配给当前位于前台的应用程序。当摄像头可见时，它会窃取 CPU 时间并降低浏览器的优先级。我们需要做的就是测量我们的页面有多少处理时间，当相机启动时，我们的可用时间将急剧下降。当相机关闭（取消或其他方式）时，我们的可用时间会增加。

实现

我们可以通过使用 setTimeout() 在 X 毫秒内调用回调来测量 CPU 计时，然后测量实际调用它需要多长时间。浏览器永远不会在 X 毫秒后准确调用它，但如果它合理接近，那么我们一定位于前台。如果浏览器距离很远（比请求的速度慢 10 倍以上），那么我们一定处于后台。其基本实现如下：

function waitForCameraDismiss() {
  const REQUESTED_DELAY_MS = 25;
  const ALLOWED_MARGIN_OF_ERROR_MS = 25;
  const MAX_REASONABLE_DELAY_MS =
      REQUESTED_DELAY_MS + ALLOWED_MARGIN_OF_ERROR_MS;
  const MAX_TRIALS_TO_RECORD = 10;

  const triggerDelays = [];
  let lastTriggerTime = Date.now();

  return new Promise((resolve) => {
    const evtTimer = () => {
      // Add the time since the last run
      const now = Date.now();
      triggerDelays.push(now - lastTriggerTime);
      lastTriggerTime = now;

      // Wait until we have enough trials before interpreting them.
      if (triggerDelays.length < MAX_TRIALS_TO_RECORD) {
        window.setTimeout(evtTimer, REQUESTED_DELAY_MS);
        return;
      }

      // Only maintain the last few event delays as trials so as not
      // to penalize a long time in the camera and to avoid exploding
      // memory.
      if (triggerDelays.length > MAX_TRIALS_TO_RECORD) {
        triggerDelays.shift();
      }

      // Compute the average of all trials. If it is outside the
      // acceptable margin of error, then the user must have the
      // camera open. If it is within the margin of error, then the
      // user must have dismissed the camera and returned to the page.
      const averageDelay =
          triggerDelays.reduce((l, r) => l + r) / triggerDelays.length
      if (averageDelay < MAX_REASONABLE_DELAY_MS) {
        // Beyond any reasonable doubt, the user has returned from the
        // camera
        resolve();
      } else {
        // Probably not returned from camera, run another trial.
        window.setTimeout(evtTimer, REQUESTED_DELAY_MS);
      }
    };
    window.setTimeout(evtTimer, REQUESTED_DELAY_MS);
  });
}

我在最新版本的 iOS 和 Android 上对此进行了测试，通过设置 元素上的属性来调出本机相机。

<input type="file" accept="image/*" capture="camera" />
<input type="file" accept="video/*" capture="camcorder" />

这实际上比我预期的要好得多。它通过请求在 25 毫秒内调用计时器来运行 10 次试验。然后，它会测量调用实际花费的时间，如果 10 次尝试的平均值小于 50 毫秒，我们就假设我们一定位于前台，并且相机消失了。如果大于50毫秒，那么我们一定还在后台，应该继续等待。

我使用了 setTimeout() 而不是

setInterval() ，因为后者可以对多个调用进行排队，这些调用会立即执行。这可能会大大增加数据中的噪声，因此我坚持使用 setTimeout()，尽管这样做有点复杂。

这些特定的数字对我来说效果很好，尽管我至少见过一次过早检测到相机关闭的情况。我相信这是因为相机打开速度可能很慢，并且设备在实际进入后台之前可能会运行 10 次试验。添加更多试验或在启动此功能之前等待大约 25-50 毫秒可能是解决此问题的方法。

桌面

不幸的是，这实际上不适用于桌面浏览器。理论上，同样的技巧是可能的，因为它们确实优先考虑当前页面而不是背景页面。然而，许多桌面有足够的资源来保持页面全速运行，即使在后台运行，因此这种策略在实践中并不真正有效。

替代解决方案

没有多少人提到我确实探索过的一种替代解决方案是模拟 FileList。我们从 中的 null 开始，然后如果用户打开相机并取消，他们会返回到 null，这不是更改，不会触发任何事件。一种解决方案是在页面开始时将虚拟文件分配给 ，因此设置为 null 将是一个会触发适当事件的更改。

不幸的是，没有正式的方法来创建 FileList，并且 元素特别需要 FileList 并且不会接受除 null 之外的任何其他值。当然，FileList 对象不能直接构造，这是为了解决一些显然不再相关的旧安全问题。获取 元素之外的唯一方法是利用一种 hack，复制粘贴数据来伪造剪贴板事件，其中可以包含 FileList 对象（您基本上是在伪造一个在您的网站上拖放文件的事件）。这在 Firefox 中是可行的，但不适用于 iOS Safari，因此它对于我的特定用例来说不可行。

浏览器，拜托……

不用说，这显然是荒谬的。事实上，网页对于关键 UI 元素已更改的通知为零，这简直是可笑的。这确实是规范中的一个错误，因为它从来没有打算用于全屏媒体捕获 UI，并且从技术上讲，不触发“更改”事件是符合规范的。

但是，浏览器厂商能否认清这个现实？这可以通过一个新的“完成”事件来解决，即使没有发生任何更改也会触发该事件，或者您也可以只是触发“更改”。是的，这违反了规范，但对我来说，在 JavaScript 端删除更改事件是微不足道的，但从根本上不可能发明我自己的“完成”事件。即使我的解决方案实际上只是启发式的，如果不能保证浏览器的状态。

就目前情况而言，这个 API 基本上无法用于移动设备，我认为相对简单的浏览器更改可以使 Web 开发人员变得更加容易 * 摆脱肥皂盒 *。

Answer 21

你不能。

文件对话框的结果不会暴露给浏览器。

Answer 22

新的文件系统访问 API 将使我们的生活再次变得轻松： )

try {
    const [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    // ...
}
catch (e) {
    console.log('Cancelled, no file selected');
}

浏览器支持非常有限（2021 年 1 月）。该示例代码在 Chrome 桌面 86 中运行良好。

Answer 23

当您选择文件并单击打开/取消时，input 元素应该失去焦点，即模糊。假设 input 的初始 value 为空，blur 处理程序中的任何非空值都表示 OK，空值表示取消。

更新：隐藏输入时，不会触发模糊。因此，不能在基于 IFRAME 的上传中使用此技巧，除非您想临时显示输入。

Answer 24

这些解决方案中的大多数对我来说不起作用。

问题是你永远不知道哪个事件会首先被触发，
是点击还是更改？您不能假设任何顺序，因为它可能取决于浏览器的实现。

至少在 Opera 和 Chrome 中（2015 年末），click 会在用文件“填充”输入之前触发，因此您永远不会知道 files.length != 0 的长度直到您延迟点击在更改后触发。

这是代码：

var inputfile = $("#yourid");

inputfile.on("change click", function(ev){
    if (ev.originalEvent != null){
        console.log("OK clicked");
    }
    document.body.onfocus = function(){
        document.body.onfocus = null;
        setTimeout(function(){
            if (inputfile.val().length === 0) console.log("Cancel clicked");
        }, 1000);
    };
});

Answer 25

/* Tested on Google Chrome */
$("input[type=file]").bind("change", function() {
    var selected_file_name = $(this).val();
    if ( selected_file_name.length > 0 ) {
        /* Some file selected */
    }
    else {
        /* No file selected or cancel/close
           dialog button clicked */
        /* If user has select a file before,
           when they submit, it will treated as
           no file selected */
    }
});

Answer 26

也只需监听点击事件即可。

继 Shiboe 的示例之后，这里有一个 jQuery 示例：

var godzilla = $('#godzilla');
var godzillaBtn = $('#godzilla-btn');

godzillaBtn.on('click', function(){
    godzilla.trigger('click');
});

godzilla.on('change click', function(){

    if (godzilla.val() != '') {
        $('#state').html('You have chosen a Mech!');    
    } else {
        $('#state').html('Choose your Mech!');
    }

});

您可以在此处查看它的实际效果： http://jsfiddle.net/T3Vwz

Answer 27

现代浏览器为输入文件添加了取消事件

input.addEventListener('cancel', (e) => {
    console.log(e);
});

请参阅浏览器支持 caniuse

Answer 28

如果您选择与之前相同的文件并单击“取消”，则可以捕获取消：在这种情况下。

你可以这样做：

<input type="file" id="myinputfile"/>
<script>
document.getElementById('myinputfile').addEventListener('change', myMethod, false);
function myMethod(evt) {
  var files = evt.target.files; 
  f= files[0];
  if (f==undefined) {
     // the user has clicked on cancel
  }
  else if (f.name.match(".*\.jpg")|| f.name.match(".*\.png")) {
     //.... the user has choosen an image file
     var reader = new FileReader();
     reader.onload = function(evt) { 
        try {
        myimage.src=evt.target.result;
            ...
         } catch (err) {
            ...
         }
     };
  }     
  reader.readAsDataURL(f);          
</script>

Answer 29

最简单的方法是检查临时内存中是否有文件。如果您想在每次用户单击文件输入时获取更改事件，您可以触发它。

var yourFileInput = $("#yourFileInput");

yourFileInput.on('mouseup', function() {
    $(this).trigger("change");
}).on('change', function() {
    if (this.files.length) {
        //User chose a picture
    } else {
        //User clicked cancel
    }
});

Answer 30

就我而言，我必须在用户选择图像时隐藏提交按钮。

这就是我的想法：

$(document).on('click', '#image-field', function(e) {
  $('.submit-button').prop('disabled', true)
})
$(document).on('focus', '#image-field'), function(e) {
  $('.submit-button').prop('disabled', false)
})

#image-field 是我的文件选择器。当有人点击它时，我禁用表单提交按钮。关键是，当文件对话框关闭时 - 无论他们选择文件还是取消 - #image-field 重新获得焦点，所以我监听该事件。

更新

我发现，这在 safari 和 poltergeist/phantomjs 中不起作用。如果您想实施它，请考虑此信息。