Directory

Directory と File の作製/削除です。



【Button Source Code】
<button onclick="MarkDir('Mydir')">Directory を作成</button>
<button onclick="writeDirFile()"> Write /Mydir/w.txt</button>
<button onclick="readDirFile()">Read /Mydir/w.txt</button>
<br>
<button onclick="deleteDirFile('/Mydir/w.txt')">Delete /Mydir/w.txt</button>
<button onclick="ReMarkDir('Mydir')">Directory の削除</button>

  1. HTML5 から File API が使えるようになり、ローカルのファイルをブラウザ上で直接取り扱えるようになりました。
    File API でも通常の Windwos と同様に Directory(Folder) を使うことが出来ます。
    ボタンのクリックで Directory と File を作成/削除する関数を呼び出します。
    1. Directory を作成
      クリックすると Directory(/Mydir) を作成します。
    2. Write /Mydir/w.txt
      Directory(/Mydir) の元に w.txt を格納します。
    3. Read /Mydir/w.txt
      /Mydir/w.txt を入力して作成されたことを確認します。
    4. Delete /Mydir/w.txt
      /Mydir/w.txt を削除します。
    5. Directory の削除
      Directory(/Mydir) を削除して、一連のテストが完了です。
    6. Directory(/Mydir) を作成した後で無いと、/Mydir/w.txt は格納出来ません。
      /Mydir/w.txt を削除した後で無いと、/Mydir は削除出来ません。

【関数の Source Code】
<script type="text/javascript">
function errorHandler(e)
{   var msg = '';
    switch(e.code)
    {   case FileError.QUOTA_EXCEEDED_ERR:
            msg = 'QUOTA_EXCEEDED_ERR';
            break;
        case FileError.NOT_FOUND_ERR:
            msg = 'NOT_FOUND_ERR';
            break;
        case FileError.SECURITY_ERR:
            msg = 'SECURITY_ERR';
            break;
        case FileError.INVALID_MODIFICATION_ERR:
            msg = 'INVALID_MODIFICATION_ERR';
            break;
        case FileError.INVALID_STATE_ERR:
            msg = 'INVALID_STATE_ERR';
            break;
        default:
            msg = 'Unknown Error';
            break;
    };
    window.alert('Error: ' + msg);
}

function MarkDir(dir)
{   window.webkitRequestFileSystem(TEMPORARY, 1024,
        function(fs)
        {   fs.root.getDirectory(dir, {create: true},
               function(dirEntry)
               {   alert("Success! : " + dir);  },
               errorHandler);
        },
        errorHandler);
}

function ReMarkDir(dir)
{   window.webkitRequestFileSystem(TEMPORARY, 1024,
        function(fs)
        {   fs.root.getDirectory(dir, {},
                function(dirEntry)
                {   dirEntry.remove(
                        function()
                        {   alert('Directory removed.' + dir);  },
                        errorHandler);
                },
                errorHandler);
        },
        errorHandler);
}

//Mydir/w.txt を書き込む
function writeDirFile()
{   window.webkitRequestFileSystem(window.TEMPORARY, 1024,
        function(fs)
        {   fs.root.getFile("/Mydir/w.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("/Mydir/w.txt 書き込み完了");  };
                        });
                 });
        },
        errorHandler);
}

//Mydir/w.txt を読み込む
function readDirFile()
{   window.webkitRequestFileSystem(window.TEMPORARY, 0,
        function(fs)
        {   fs.root.getFile("/Mydir/w.txt", {},
                function(fileEntry)
                {   fileEntry.file(
                        function(file)
                        {   var reader = new FileReader();
                            reader.onload =
                                function()  {  window.alert(this.result);  }
                            reader.readAsText(file);
                        });
                },
                errorHandler);
        },
        errorHandler);
}

//Mydir/w.txt を削除
function deleteDirFile(filename)
{   window.webkitRequestFileSystem(TEMPORARY, 0,
        function(fs)
        {   fs.root.getFile(filename, {create: false},
                function(fileEntry)
                {   fileEntry.remove(
                        function()  {  window.alert("File Delete! : " + filename);  },
                        errorHandler);
                },
                errorHandler);
        },
        errorHandler);
}
</script>

  1. function errorHandler(e) はエラーが発生したときの Handler です。
    エラーが発生した状況を多少なりとも解析して表示しています。
  2. MarkDir(dir) で Directory(/Mydir) を作成します。
    dir はボタンのクリックから呼び出されたときに 'Mydir' が渡されます。
  3. ReMarkDir(dir) で Directory(/Mydir) を削除します。
    dir はボタンのクリックから呼び出されたときに 'Mydir' が渡されます。
  4. writeDirFile() で "/Mydir" の元に w.txt を格納します。
    TEMPORARY File の作製は TEMPORARY I-O を参照して下さい。
  5. readDirFile() で w.txt を入力して確認します。
    TEMPORARY File の入力は TEMPORARY I-O を参照して下さい。
  6. deleteDirFile(filename) で w.txt を削除します。
    TEMPORARY File の削除は TEMPORARY I-O を参照して下さい。

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