javascript - getElementById返回null

我正在尝试使用以下形式在我的文件中读取文件：

<form name="UploadForm" method="post">
    <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
    Choose a CSV file to upload: <input name="upload_file" type="file" /><br />
    <input type="submit" value="Upload" onClick="uploadFile()" />
</form>

但是，当我去读取此函数中的值时，会收到“ cannon find”元素为null的错误：

function uploadFile() {
        var file = document.getElementById('UploadForm').elements['upload_file'].value;
        var allTextLines = file.split(/\r\n|\n/);
        var headers = allTextLines[0].split(',');
        var lines = [];

        for (var i=1; i<allTextLines.length; i++) {
            var data = allTextLines[i].split(',');
            if (data.length == headers.length) {

                var tarr = [];
                for (var j=0; j<headers.length; j++) {
                    tarr.push(headers[j]+":"+data[j]);
                }
                lines.push(tarr);
            }
        }
        alert(lines);
    };

有人对我在做什么错有任何想法吗？

最佳答案

getElementById返回具有指定ID的元素，但是表单根本没有id。您正在使用过时的name属性（在1998年发布HTML 4时，该属性已由id取代）。

更改为：

<form id="UploadForm" method="post">

（NB name在窗体控件（例如input和select）上不是过时的）



请注意，您的事件处理程序不会取消“提交”按钮的默认行为。因此，除了运行JS之外，您还将立即提交表单，离开页面并取消JS（如果它执行异步操作，顾名思义，它将是）。

如果要使用内部事件属性，那么如果JavaScript成功，则需要return false。

我建议还是放弃他们，而赞成addEventListener。

关于javascript - getElementById返回null，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13090837/