javascript - 如何捕获 "file selected"事件？

Question

我的 application 中有以下对话框:

当用户按下添加 Logo 按钮时，会发生以下情况:

1. 应该会弹出一个文件选择对话框。
2. 用户选择文件后，应调用一个函数(这将更新图像)。

我有以下代码。 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");
    });
};

当我按下添加 Logo 按钮时，文件选择对话框会打开，但调用的单击回调消息不会出现在控制台中。这意味着我无法检测用户何时选择了文件(或通过“取消”关闭了对话框)。

如何对用户选择文件(或取消对话框)使用react？

Answer 1

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

如果您将 click 监听器替换为 change 监听器，它应该可以工作:)

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

必须成为:

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