getElementById返回null

Question

我正在尝试使用此表单在我的文件中读取文件：

<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 error：

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);
    };

有没有人对我做错了什么有任何想法？

Answer 1

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

将其更改为：

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

（N.B。name在控件上 已过时，例如input和select）

---

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

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

我建议尽量放弃addEventListener。

Answer 2

将输入标记更改为：

 <input name="upload_file" id="upload_file" type="file" />

同时更改此行：

 的document.getElementById（ 'UploadForm'）。元素[ 'upload_file']。值

到

的document.getElementById（ 'upload_file'）。值