JavaScript 函数只调用一次而不是每次调用答案

【问题标题】：JavaScript function called only once instead of every timeJavaScript 函数只调用一次而不是每次调用
【发布时间】：2016-09-02 08:57:34
【问题描述】：

我需要一个 javascript 代码，用于在每次输入值更改（即每次用户选择要上传的文件时）上传之前检查输入文件的大小。

到目前为止，我想出了这个：

var file = document.getElementById("myFile");
    file.addEventListener('change', function() {
        if (this.files[0].size > 2*1024*1024) {
            alert('Max file size is 2 MB');
            file.removeAttribute('value');
            file.parentNode.replaceChild(file.cloneNode(true),file);
            }
        }
    );

而 HTML 是：

<form action="?" method="post">
    <input type="file" id="myFile" name="myFile" />
    <input type="submit" value="upload" />
</form>

现在，如果我这样保留 Javascript 代码，它就根本不起作用。但是如果我这样改变它

window.onload = function() {

      // Same code above

}

它有效，但仅适用于用户选择的第一个文件。

如何更改它以使其每次用户选择文件时都可以工作？ （如果可能没有 jQuery）

【问题讨论】：

您可以尝试将其更改为document.onload吗？
问题是，当文件太大时，你替换元素 - 它不再有事件监听器
@DustinToothless — 是什么让您认为这会有所帮助？
@DustinToothless 不工作。对于第一个文件选择都不是
只需设置file.value=''; 而不是你正在做的事情

标签： javascript forms file-upload input

【解决方案1】：

无需克隆节点等...只需将值设置为'';

file.value = '';

查看工作 sn-p

document.getElementById("myFile").addEventListener('change', function() {
  if (this.files[0].size > 2*1024*1024) {
    alert('Max file size is 2 MB');
    this.value='';
  }
});

<form action="?" method="post">
    <input type="file" id="myFile" name="myFile" />
    <input type="submit" value="upload" />
</form>

【讨论】：

【解决方案2】：

来自the documentation for cloneNode：

克隆一个节点会复制它的所有属性和它们的值，包括内在（在线）监听器。 它不会复制使用 addEventListener() 添加的事件监听器

您正在删除带有事件处理程序的元素并将其替换为没有更改侦听器的元素

您需要再次调用addEventListener（并将file.cloneNode(true), 存储在一个变量中，以便您可以在其上调用addEventListener并将其传递给replaceChild）。

【讨论】：

怎么办？你的代码表明你知道如何使用addEventListener，使用变量是JS 101。
@Quentin - 这是我今天第二次看到这种代码，克隆到表单中的清除值，我以前从未见过这种情况。有什么理由这样做，而不仅仅是清除输入的值？真正的问题，过去你已经多次纠正我的错误假设，所以我很重视你的意见
@JaromandaX — 我可能不会那样做，但我不知道 M. C. 的原因是什么。