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>

しかし、この関数の値を読み取ろうとすると、null エラーの「cannon find "elements"」が表示されます。

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 属性を使用しています ( HTML 4 が 1998 年にリリースされたときnameに置き換えられました)。id

次のように変更します。

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

(NBnameは、やなどのフォームコントロールでは廃止されていません)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 に答える