fileReader：ローカルファイルの内容表示

fileList ではファイルの属性を取り出すだけでしたが、fileReader では、それに加えて、ファイルの中身を取り出す機能をもっています。
ここでは、fileList 例２：ダイアログボックスによる属性の取得（this)に加える事項につき説明します。
fileReaderの主要機能は、ファイル読込みの状態監視（読込みエラー、読取状況の表示、読取正常完了など）ですが、正常完了以外のケースを作成するのが面倒なので、ここでは、正常完了することを前提にしています。
また、fileReader での読込方法を、ここでは、
　　readAsText：テキストファイル（文字データ）の読込み
　　readAsDataURL：画像ファイルの読込み
に限定しています。

　選択されたファイルの全文を表示します。しかし、このプログラムでは次のような制約があります。

text/plain
- ファイルの文字コードと、行Ｈでの文字コードが一致しないと文字化けします。
  ここでは UTF-8 を標準にしているので Shift-JIS のファイルは文字化けします。
- 文字コードが一致していても、改行コードが無視されます。
text/html
- 表示ファイルで記述しているリンク先や画像のＵＲＬが相対指定だと、このページ（プログラムのあるページ）からの相対指定だとされ、正しく動作しません。
- 表示ファイルに、このページと同じstyleやscriptがあると、表示ファイルでの指定が優先され、このページの画面にまで影響してしまいます。
image/xxx
- 対象ファイルの画像サイズのままで表示される（縮小されない）ので、画面からはみ出してしまうことがあります。
上記以外のファイルは開けません。

<script>
    function fileReader(files) {                            // 行Ａ
        for (var i = 0; i < files.length; i++){             // 行Ｂ

            var ファイル   = files[i];                       // 行Ｃ
            var ファイル名 = files[i].name;
            var タイプ     = files[i].type;
            var サイズ     = files[i].size;
                        document.getElementById("属性表示場所").innerHTML
                            = "ファイル名= " + ファイル名
                            + ", タイプ = " + タイプ
                            + ", サイズ = " + サイズ + "bytes";

            var reader = new FileReader();                  // 行Ｄ

            if (タイプ.match('text.*') ) {                   // 行Ｅ　テキストのとき
                reader.onload = function(event) {           // 行Ｆ
                        document.getElementById("内容表示場所").innerHTML
                            = event.target.result;   // 行Ｇ
                }
                reader.readAsText(ファイル, "utf-8");         // 行Ｈ
            }

            else if (タイプ.match('image.*') ) {               // 行Ｉ　画像ファイルのとき
                reader.onload = function(event) {              // 行Ｊ
                    var tagDiv = document.createElement('div');  // 行Ｋ１ <div>
                    var tagImg = document.createElement('img');  // 行Ｋ２ <img>
                    tagImg.src = event.target.result;            // 行Ｋ３ <img src=～>
                    tagDiv.appendChild(tagImg);                  // 行Ｋ４ <div><img src=～>
                        document.getElementById("内容表示場所").innerHTML
                            = tagDiv.innerHTML;                  // 行Ｋ５
                }
                reader.readAsDataURL(ファイル);                  // 行Ｌ
            }
            else {
                        document.getElementById("内容表示場所").innerHTML
                            = "対象以外のタイプです。";
            }
        }
    }
</script>


<input type="file" multiple                                    <!-- 行Ｍ -->
        onChange="fileReader(this.files)"></input></p>

<div id="属性表示場所" class="red">ここに属性が表示されます。</div>
<div id="内容表示場所">ここにファイル内容が表示されます。</div>

　表示量が多いので、１ファイルごとにアラームを出して表示します。

ここに属性が表示されます。

ここにファイル内容が表示されます。

結果の非表示

ファイルの読込

行Ｍで入力したファイル群のオブジェクトを引数 fileｓとして関数 fileReader が呼び出されます（行Ａ）。
行Ｂでの files.length は選択ファイルの個数で、行Ｃ以降で個々のファイル名やタイプが得られます。ここまでは、fileListと同じです。
var reader = new FileReader(); により、ファイルの内容を読み込む FileReaderオブジェクトを生成し、ファイルの内容を非同期で取得することができます（readerの名称は任意ですが、一般に「reader」が使われています）。
行Ｅの「タイプ.match('text.*')」の 'text.*' は正規表現で、
　　　　text：文字列「タイプ」の先頭部分が「text」で、
　　　　.* ：次に改行コード以外の任意文字が続く
ならば真、そうでなければ偽になります。
ここでは、「タイプが text/plain や text/html などのとき」という意味になります。
同様に、行Ｉは「タイプが image/jpeg や image/gif など画像ファイルのとき」となります。
行Ｆと行Ｈの関係は、行Ｈのreader.readAsTextでファイルを読み、読み終わったら（行Ｆのreader.onload）の function を実行する」という関係です。すなわち、onload は readAsText の実行以前にイベントが発生したときの処理を記述しておくことになります。
行Ｊと行Ｌも行Ｆと行Ｈの関係と同じです。
（このような処理にするのは、file API が非同期アクセスを標準にしているからです。）

テキストファイルの取扱

reader.readAsText(ファイル, "utf-8");とは、「「ファイル」を文字コード（utf-8）のテキストデータ（AsText）として読込み、その内容をオブジェクト（reader）に入れる」という意味です。
ここで指定した文字コードとファイルの文字コードが異なると文字化けします。事前に文字コードを知っておく必要があります。
行Ｆでは function により、ファイルのテキストが入っているevent.target.resultをそのまま表示させています（ここでのeventは任意の名称でよいのですが、「読込イベント」なので、event を変数名にするのが通常です）。
「テキスト内容 = event.target.result;」とすると、「テキスト内容」にはプレーンテキストの改行もそのままの状態で入っています。しかし、
　　document.getElementById("表示場所").innerHTML = テキスト内容;
としたとき、自動的に改行が無視されてしまいます。

画像ファイルの取扱

行ＬのreadAsDataURLは、DataURL形式で読み込みます。
DataURL形式とは画像や音声データのURLなど（画像そのものではない）の情報です。
そのため、行Ｊで（テキストデータでの行Ｆのように）単純に event.target.result としたのでは、画像は得られません。行Ｋ１～Ｋ５の処理が必要です。
Ｋ１では<div>－</div>の要素を、Ｋ２では<img>要素を生成します。Ｋ３で、event.target.result （ファイルのurl）を<img>要素に組み込み、Ｋ４で<div>の内部（child）に<img>要素を組み込みます。
その結果、Ｋ５でのtagDiv.innerHTMLには、
　　<div><img src="画像ファイルのＵＲＬ"></div>
となり（これは正確な記述ではありません）、すなわち画像が取り出されます。

ＨＴＭＬファイルでの留意事項

行Ｆの document.getElementById("内容表示場所").innerHTML のように、このページ内に表示した場合、「内容表示場所」にＨＴＭＬを記述したのと同じ状況になります。

リンク先や画像など他のファイルのＵＲＬが記述されている場合、それが相対指定だと、このページ（プログラムのあるページ）からの相対指定だとされるので、正しく動作しません。
styleやscriptがあり、このページと同名の指定があると、ファイルでの指定が優先されるので、このページ画面の他の部分にまで影響してしまいます。

ローカル画像ファイルの表示（簡素化）

一つのローカル画像ファイルだけを対象にするときは、かなり簡素なスクリプトになります。

function fileReaderImage(files, 表示場所) {             // ア
    var reader = new FileReader();                      // イ
    reader.onload = function(event) {                   // ウ
        var tagDiv = document.createElement('div');     // エ　＜div＞ pでもspanでもよい
        var tagImg = document.createElement('img');     // オ　＜img 
        tagImg.src = event.target.result;               // カ　＜img src=～＞
        // tagImg.width = 200;                          // キ　width, height
        tagDiv.appendChild(tagImg);                     // ケ　＜div＞＜img src=～＞
        document.getElementById(表示場所).innerHTML = tagDiv.innerHTML;  // コ
    }                                                   // サ
    reader.readAsDataURL(files[0]);                     // シ　画像ファイルを読み込む
}                                                       // ス

<input type="file" onChange="fileReaderImage(this.files)"></input></p>  // セ
<div id="画像表示場所"></div>                          // ソ <div>は何でもよい