Question

我需要一个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）

Answer 1

来自the documentation for cloneNode：

克隆节点会复制其所有属性及其值，包括内部（内联）侦听器。 它不会复制使用addEventListener（）
添加的事件侦听器

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

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

Answer 2

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

curl /something/123

参见工作代码段

curl /something/123?q=234542345

file.value = '';

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

2 个答案: