0

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

<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”元素”的空错误：

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

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

4

2 回答 2

5

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

将其更改为：

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

（NB在表单控件name上并没有过时，例如and ）inputselect

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

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

我建议放弃它们以支持它们addEventListener。

于 2012-10-26T16:32:53.540 回答
0

将您的输入标签更改为：

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

还将这一行从：

document.getElementById('UploadForm').elements['upload_file'].value

更改为

document.getElementById('upload_file').value

于 2012-10-26T16:40:00.207 回答