【JavaScript】inputタグで指定したテキストファイルを読み込む方法

2018年9月27日
JavaScript

inputタグで指定したテキストファイルを読み込み、テキストエリアに反映させたかったので作成。

コード

<!--下記のタグを任意の位置に配置-->
<input id="load" type="file">
function registerLoadEvent() {
    const LOAD = document.getElementById( 'load' );
    if ( LOAD === null ) return;

    const onLoad = function( event ) {
        const TARGET = event.target;

        if ( TARGET === null ) return;
        if ( TARGET.files.length === 0 ) return;

        const FILE_BLOB = TARGET.files[0];
        const READER    = new FileReader();
        const onLoaded  = function() {
            // ↓ に読み込んだテキストが格納されるため、この中にテキストを利用した処理を記述
            READER.result;
        };

        READER.addEventListener( 'load', onLoaded );
        READER.readAsText( FILE_BLOB );
    };

    LOAD.addEventListener( 'change', onLoad );
}

document.addEventListener( 
	'DOMContentLoaded', 
	function() { registerLoadEvent(); } 
);

説明

まず、HTMLでファイルを指定するinputタグを任意の位置に配置する。

次に、registerLoadEvent関数を定義し、その関数をDOMContentLoadedイベント内で呼び出す。

これでinputタグでファイルを指定すると、ファイルが読み込まれ、完了した時にregisterLoadEvent関数内のonLoadedが呼び出される。そのため、後はonLoaded内でテキストが格納されている変数であるREADER.resultを利用した処理を記述すればよい。