检查由Javascript函数创建的HTML输入的文件大小

Question

单击按钮incrementBtn后，会通过此Javascript函数在div

attachments

中创建html输入文件类型：

var counter = 0;
var incrementBtn = document.getElementById('incrementBtn');
var attachments = document.getElementById('attachments');

var createNewFiled = function() {
    counter++;
    if (counter <= 10) {
        var input = document.createElement("input");
        var br = document.createElement("br");
        var br2 = document.createElement("br");

        input.id = 'file'+counter;
        input.classList.add("inputClass");
        input.type = 'file';
        input.name = 'file'+counter;
        
        attachments.appendChild(input);
        attachments.appendChild(br);
        attachments.appendChild(br2);
    }
    else {
        alert('Ten attachments is max.');
    }

HTML：

<div id='attachments'></div><button onclick='createNewFiled()' id='incrementBtn' type='button'>+</button>

我想在 POST 之前检查文件大小（我也在 PHP POST 之后检查，但是如果超过 php.ini 中的最大文件大小，POST 将失败并且用户不会收到通知...）

我尝试在 createNewFiled 函数中的

input.onchange = 'upload_check()';

之后添加行

input.name = 'file'+counter;

，但正如我在浏览器开发工具中看到的那样，onchange 不存在。这是点击按钮后创建的：

<input id="file1" class="inputClass" type="file" name="file1">

这是 upload_check 函数（它只是出于测试目的检查 file1）：

function upload_check()
    {
        var upl = document.getElementById("file1");
        var max = 1000000;

        if(upl.files[0].size > max)
        {
        alert("File too big!");
        upl.value = "";
        }
    };

我做错了什么？

Answer 1

这是不对的：

input.onchange = 'upload_check()';

这尝试设置一个 HTML 属性，但您实际上是在设置 input 元素的

property

（这实际上很好），在这种情况下，您不应该分配字符串，而应该分配函数（对象）本身。所以：

input.onchange = upload_check;

最好的做法是使用

addEventListener

附加事件处理程序，因为这允许您为同一事件拥有多个处理程序：

input.addEventListener("change", upload_check);