テキストファイルを表示する

JS

ユーザーがテキストファイルを選ぶと、その内容を表示するコードです。

HTMLの部品を作成し、その部品をJavaScriptで関連付けることにより、選択したファィルの情報をJSが得て、画面に表示する作業を行います。

最初はHTMLの説明。次は、HTMLとJavaScriptを結びつける仕組みの説明。最後にファイルを読み込み、表示するコードの説明をします。

ウェブの部品をHTMLで作成する

JavaScriptの記述がないので、反応はありません

 

素のHTMLタグ

<button type="button" id="reset">クリア</button>
<form id="frm">
    <input id="selecter" type="file" />
</form>
<div id="view"></div>

HTMLタグの解説

  1. リセットボタンを作成します
  2. ファイル選択ボタンを作成します
  3. 選択したファイルを表示します

ウェブの部品にJavaScriptを関連付ける

inputタグを監視するコード イベントリスナー


このボタンに下のコードを紐付けします。実際に「ファイルを選択」を操作してください。ダイアログが表示されるので、ボタンとコードの結びつきが確認できます。

 selector.addEventListener('change', (e)=> {
        alert("クリック");
    })	

コードの解説

  1. selectorは(HTML)inputタグにつけたIDです。
    • inputタグを監視するコードです。changeイベントを監視します
    • 「change」イベントをキャッチした場合、{ }内のコードを実行します
  2. alertを表示します

inputタグを監視するコード

実際に動作するコードは、このようになります。
選択したファイルをFileReaderが読み取り、divタグに表示します。

const reader = new FileReader();
selector.addEventListener('change', (e)=> {         
    f = e.target.files[0];
    //   if (isStop(f)) return;
    reader.readAsText(f);
})		
     
reader.addEventListener("load", ()=> {   
    d = document.getElementById("view");
    doc = reader.result;
    d.innerHTML="<pre>" + doc + "</pre>";
})

コードの解説

  1. FileReaderを生成します
  2. 「ファイル選択」ボタンを監視するコードです。ボタンのchangeイベントに反応します
  3. 選択したファイルを、「f」変数に代入します
  4. この行は、後で説明します
  5. Readerが選択したファイル(変数f)をテキストとして読み取ります
  6.  
  7.  
  8. Readerを監視するコードを作成します
  9. <div>タグのIDを指定して、変数「d」に代入します
  10. Readerがファイルを読み取り変数「doc」の代入します
  11. <div>タグに、読み取ったファイルを表示します
  12.  

inputタグを監視するコード isStop()

さきほど、コメントアウト「//」したコードを表示、解説します。
内容はエラー回避コードです。

function isStop(f) {
    if (f.type.match("text.*")) return false;
    ans = confirm(msg);
    if (ans) return false;
    clear();
    return true;
}

コードの解説

  1. 関数(function)isStopの定義です
  2. f「Readerが読み込んだファイル」の種類がテキストファイルの場合は、処理を続行する、falseを返します。
  3. テキストファイルでない可能性があるので、ユーザーにダイアログを示し、中止するか続行するか選択させます
  4. ユーザーがダイアログの「OK」(続行する)を押したので、Falseを返し終了します。isStop()は中止しますか?ですから、Falseつまり中止はしないを返します
  5. clear()は、部品を初期値に戻します。クリアボタンでも使います。このコードの解説はしません
  6. True値を返します 。「処理を中止します」を意味します。

ソース

JavaScriptファイル名は、このHTMLの<script>test.js</script>と同名にしてください

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript サンプル</title>
</head>
<body>
<div id="view"></div>
<button type="button" id="reset">クリア</button><br/>
<form id="frm">
    <input id="selector" type="file" />
</form>
<div id="view"></div>

<script src="test.js"></script>
</body>
</html>
test.js
 const msg = "選択したファイルは、文字として表示できない可能性があります\n中止は「キャンセル」を、\n続行は「OK」を押してください";

    const reader = new FileReader();

    selector.addEventListener('change', (e)=> {
        f = e.target.files[0];
        if (isStop(f)) return;
        reader.readAsText(f);
    })		      

    reader.addEventListener("load", ()=> {
        d = document.getElementById("view");
        doc = reader.result;
        d.innerHTML="<pre>" + doc + "</pre>";
    })
    
    cls = document.getElementById("reset");
    cls.addEventListener("click",()=> {
        clear();
    })

    function isStop(f) {
        if (f.type.match("text.*")) return false;
        ans = confirm(msg);
        if (ans) return false;
        clear();
        return true;
    }

    function clear() {
     document.getElementById("frm").reset();
     document.getElementById("view").innerHTML="";
    }

完成版

選択したテキストファイルを、ここに表示します

 
タイトルとURLをコピーしました