如何捕捉“文件选择”事件？答案

【问题标题】：How can I catch the "file selected" event?如何捕捉“文件选择”事件？
【发布时间】：2018-10-09 16:03:34
【问题描述】：

我的application 中有以下对话框：

当用户按下Add logo按钮时，应该会发生以下事情：

应该会弹出一个文件选择对话框。
用户选择文件后，应调用一个函数（该函数将更新图像）。

我有以下代码。用于文件选择的markup 如下所示：

<button class="btn" ng-click="$ctrl.addLogo()">Add logo</button>

$ctrl.addLogo() 定义为 (source)

$ctrl.addLogo = function() {
    console.log("'Add logo' button clicked");
    var uploadForm = document.createElement('form');
        var fileInput = uploadForm.appendChild(document.createElement('input'));
    fileInput.type = 'file';
        fileInput.name = 'images';
    fileInput.multiple = true;
        fileInput.click(function() {
        console.log("Click callback called");
    });
};

当我按下Add logo 按钮时，文件选择对话框会打开，但Click callback called 消息不会出现在控制台中。这意味着当用户选择了一个文件（或使用“取消”关闭对话框）时，我无法检测到。

如何对用户选择文件（或取消对话框）做出反应？

【问题讨论】：

我认为您必须在文件输入上使用onchange 事件而不是onclick，这应该可以完成工作;)
我认为stackoverflow.com/questions/49768049/… 会帮助你。或者您可以创建一个指令。我创建了类似于监视文件更改的东西github.com/shashankvivek/RichTextEditor/blob/master/js/…
@sjahan 谢谢。你的评论很有帮助。如果您将其作为答案提交，我会接受。

标签： javascript angularjs file-upload

【解决方案1】：

当用户使用type="file" 选择input 中的文件时，将触发change 事件。

如果您用change 侦听器替换您的click 侦听器，它应该可以工作:)

fileInput.click(function() {
    console.log("Click callback called");
});

必须变成：

fileInput.change(function() {
    console.log("Click callback called");
});

【讨论】：