onChange 事件在选择文件之前触发

Posted 2023-02-21

【中文标题】onChange 事件在选择文件之前触发

【英文标题】：onChange event triggers before selecting the file

【发布时间】：2022-01-03 22:48:37

【问题描述】：

所以我有一个使用 javascript 从 JSON 生成的表。 表格内有一个文件上传按钮，我需要交换图像（所有图像都在同一个文件夹中，所以我只需要文件名） 生成过程是这样的

    ImageClick = document.createElement('input');
    ImageClick.type = "file";
    ImageClick.id = "subida"
    ImageClick.onChange = handleFiles();
    cell.appendChild(ImageClick);

handleFiles 函数

    function handleFiles() 
        const fileList = this.files;
        console.log(fileList[])

The result looks like this

所以当表格生成时，handleFiles 函数会立即触发，甚至在选择文件之前，所以我得到了一个

Uncaught TypeError: fileList is undefined

页面加载后。 如果我尝试使用

加载文件上传元素

filesElement = document.getElementById('subida')

我尝试控制台记录我得到的 filesElement

Uncaught TypeError: filesElement is null.

我一直在浏览互联网，但找不到答案。 我也不能使用jQuery

【问题讨论】：

没有人解释发生这种情况的原因。查看 Image（或任何）元素的 .onchange 属性/属性时，它需要对回调函数的引用。您提供的是调用回调函数的结果 -> handleFiles() - 对回调函数的引用不包括 () - 因此，将该分配更改为：ImageClick.onchange = handleFiles; -您会在您接受的答案中注意到，这就是您的代码和答案代码之间的实际差异。

还要注意，onChange 在你的代码中应该是onchange。 （案件很重要）

【参考方案1】：

这也可以：

    ImageClick.addEventListener("change", function(e) 
            const fileList = e.target.files;
            console.log(fileList);
        );

【讨论】：

这工作得很好，我虽然在 addEventListener 上是“onChange”而不是 change