スタートページJavascriptFile API

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


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

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

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

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

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

            else if (タイプ.match('image.*') ) {               // 行I 画像ファイルのとき
                reader.onload = function(event) {              // 行J
                    var tagDiv = document.createElement('div');  // 行K1 <div>
                    var tagImg = document.createElement('img');  // 行K2 <img>
                    tagImg.src = event.target.result;            // 行K3 <img src=~>
                    tagDiv.appendChild(tagImg);                  // 行K4 <div><img src=~>
                        document.getElementById("内容表示場所").innerHTML
                            = tagDiv.innerHTML;                  // 行K5
                }
                reader.readAsDataURL(ファイル);                  // 行L
            }
            else {
                        document.getElementById("内容表示場所").innerHTML
                            = "対象以外のタイプです。";
            }
        }
    }
</script>


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

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

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

ここに属性が表示されます。
ここにファイル内容が表示されます。
結果の非表示

ファイルの読込

テキストファイルの取扱

画像ファイルの取扱

HTMLファイルでの留意事項

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


ローカル画像ファイルの表示(簡素化)

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

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>は何でもよい