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

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

Answer 1

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

将其更改为:

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

(NB name是未过时的上形式的控制,例如input和select)

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

如果要使用内部事件属性,则需要return falseJavaScript成功.

我建议尽量放弃它们addEventListener.