TEMPORARY FILE I-O

TEMPORARY DATA
1234567890
abcdefg

<button onclick="saveFile()">TEMPORARY Save</button>
<button onclick="loadFile()">TEMPORARY Load</button>
<button onclick="deleteFile()">TEMPORARY Delete</button>

<script type="text/javascript">
function saveFile()
{   window.webkitRequestFileSystem(window.TEMPORARY, 1024,
        function(fs)
        {   fs.root.getFile("/memo.txt", {create: true, exclusive: false},
                function(fileEntry)
                {   // ファイル書き込み
                    fileEntry.createWriter(
                        function(fileWriter)
                        {   var blob = new Blob(["TEMPORARY DATA\n", "1234567890\n" , "abcdefg"],
                                { "type" : "text/plain" });
                            fileWriter.write(blob);
                            // ファイル書き込み成功イベント
                            fileWriter.onwrite =
                                function()
                                {   window.alert("書き込み完了");
                                };
                        });
                 });
        },
        function (err)
        {   window.alert("requestFileSystem ERROR\n" + err);
        });
}
function loadFile()
{   window.webkitRequestFileSystem(window.TEMPORARY, 0,
        function(fs)
        {   fs.root.getFile("/memo.txt", {},
                function(fileEntry)
                {   fileEntry.file(
                        function(file)
                        {   var reader = new FileReader();
                            reader.onload =
                                function()
                                {   window.alert(this.result);
                                }
                            reader.readAsText(file);
                        });
                },
                function(err)
                {   window.alert("ファイルエラー!! " + err);
　              });
        },
        function(err)
        {   window.alert("requestFileSystem ERROR\n" + err);
        });
}
function deleteFile()
{   window.webkitRequestFileSystem(TEMPORARY, 0,
        function(fs)
        {   fs.root.getFile("/memo.txt", {},
                function(fileEntry)
                {   fileEntry.remove(
                        function()
                        {   window.alert("File Delete!");
                        });
                });
        },
        function(err)
        {   window.alert("requestFileSystem ERROR\n" + err);
        });
}
</script>

TEMPORARY FILE を作成

1. HTML5 から File API が使えるようになり、ローカルのファイルをブラウザ上で直接取り扱えるようになりました。
   ファイルの入力は比較的簡単ですが作成するのは結構面倒で、最初の難所が RequestFileSystem() 関数です。
   RequestFileSystem() 関数の説明は RequestFileSystem を参照して下さい。
   Read Text File はローカル環境で動きますが RequestFileSystem() はサーバーから Chrome で起動しなければ動かないようです。
   私は 2015/09/26 Windows8 ＆ Chrome 45.0.2454.99 でこのページの実行を確認しました。
   
2. TEMPORARY Save ボタンをクリックすると saveFile() 関数が呼ばれて TEMPORARY FILE が作成されます。
   

   <button onclick="saveFile()">TEMPORARY Save</button>

3. webkitRequestFileSystem() で TEMPORARY FILE を作成します。
   window.TEMPORARY が TEMPORARY の指定で、1024 がファイルサイズです。
   

   function saveFile() { window.webkitRequestFileSystem(window.TEMPORARY, 1024,

4. fs.root.getFile() でファイルを確保します。
   "/memo.txt" がファイル名で、見つからないときは新規に作成し、見つかったときは上書きします。
   

   function(fs) { fs.root.getFile("/memo.txt", {create: true, exclusive: false},

5. createWriter() でファイルに出力します。
   new Blob() がファイルに書き込むデータです。
   Blob の説明は Blob でデータを定義 を参照して下さい。
   

   fileEntry.createWriter( function(fileWriter) { var blob = new Blob(["TEMPORARY DATA\n", "1234567890\n" , "abcdefg"], { "type" : "text/plain" }); fileWriter.write(blob);

6. ファイルの書き込みが成功すると window.alert("書き込み完了"); で知らせます。
   window.alert("requestFileSystem ERROR\n" + err); は webkitRequestFileSystem() が失敗したときの処理です。
   

   // ファイル書き込み成功イベント fileWriter.onwrite = function() { window.alert("書き込み完了"); }; }); }); }, function (err) { window.alert("requestFileSystem ERROR\n" + err); }); }

7. HTML5 の File API で扱うファイルはサンドボックス化された特殊な形式で、通常の Windows のファイルとは性質が異なります。
   これはネットワークを通じたウイルスの感染や不正なファイルアクセスに対応するためです。
   

TEMPORARY FILE を入力

1. TEMPORARY Load ボタンをクリックすると loadFile() 関数が呼ばれて TEMPORARY FILE から入力したデータが表示されます。
   

   <button onclick="loadFile()">TEMPORARY Load</button>

2. webkitRequestFileSystem() で TEMPORARY FILE を指定します。
   window.TEMPORARY が TEMPORARY の指定で、ファイルサイズは 0 でかまいません。
   saveFile() で作成したファイル名 "/memo.txt" を指定します。
   

   function loadFile() { window.webkitRequestFileSystem(window.TEMPORARY, 0, function(fs) { fs.root.getFile("/memo.txt", {},

3. new FileReader() で File Reader を生成して reader.readAsText(file); で入力します。
   成功したら window.alert(this.result); で表示します。
   window.alert("requestFileSystem ERROR\n" + err); は webkitRequestFileSystem() が失敗したときの処理です。
   

   { var reader = new FileReader(); reader.onload = function() { window.alert(this.result); } reader.readAsText(file); }); }, function(err) { window.alert("ファイルエラー!! " + err); 　 }); }, function(err) { window.alert("requestFileSystem ERROR\n" + err); }); }

TEMPORARY FILE を削除

1. TEMPORARY の場合はブラウザの裁量で削除されるので放っておいても差し支えないのですが、削除するボタンを設定してみました。
   TEMPORARY Delete ボタンをクリックすると deleteFile() 関数が呼ばれて "/memo.txt" が削除されます。
   削除した後で TEMPORARY Load ボタンをクリックしても TEXT が表示されないので確かめて下さい。
   

   <button onclick="deleteFile()">TEMPORARY Delete</button>

2. webkitRequestFileSystem() で TEMPORARY FILE を指定します。
   ファイルサイズは 0 でかまいません。
   fs.root.getFile() でファイル名 "/memo.txt" を指定します。
   

   function deleteFile() { window.webkitRequestFileSystem(TEMPORARY, 0, function(fs) { fs.root.getFile("/memo.txt", {},

3. fileEntry.remove() 関数でファイルを削除します。
   

   function(fileEntry) { fileEntry.remove( function() { window.alert("File Delete!"); }); }); }, function(err) { window.alert("requestFileSystem ERROR\n" + err); }); }

4. PERSISTENT ファイルの入出力は Write_Read を参照して下さい。
   通常の Windows ファイルの入力は Read Text File を参照して下さい。
   jQuery Get で jQuery(ジェイクエリー)を使ったファイル入力を説明しています。
   File I-O で ActiveX を使ったファイルの入出力を説明しています。
   

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)