このページの本文へ

ブラウザーにファイルを残せるFile system APIの使い方 (4/5)

2012年04月17日 11時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

ファイルを削除

 ファイルの削除もwindow.webkitRequestFileSystem()メソッドを使います。削除は、成功時に呼び出される関数内で処理します。fs.root.getFile()メソッドを使ってファイルエントリーオブジェクトを取得し、ファイルエントリーオブジェクトのremove()メソッドを呼び出せばファイルが削除されます。

 remove()メソッドには2つの引数を指定できます。最初の引数は削除に成功した時に呼び出す関数、2番目は削除に失敗した時に呼び出す関数です。

 実際のプログラムはサンプル4です。サンプル4では以下のようにしてファイルを削除しています。


function(fileEntry){
  fileEntry.remove(function(){
    var text = "ファイル"+fileEntry.name+"を削除しました。<br>";
    document.getElementById("result").innerHTML = text;
  },
  function(err){  // 失敗時のコールバック関数
    document.getElementById("result").innerHTML = "削除エラー!!<br>"+err;
  });
}
【図】fig7.png

削除するファイル名を入力しボタンをクリックする。該当ファイルがある場合は削除された旨のメッセージが表示される

【図】fig8.png

削除するファイルがない場合にはエラーとなる

■サンプル4


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content= "initial-scale=1">
    <title>ファイルを削除する</title>
  </head>
  <body>
    <h1>ファイルを削除する</h1>
    <form>
      <p>ファイル名:<input type="text" id="fsFilename" value="abc.txt"></p>
      <input type="button" value="ファイルを削除" id="removeFile">
    </form>
    <output id="result" ></output>
    <script>
      // クリックされたらファイルを削除する
      document.getElementById("removeFile").addEventListener("click", function(){
        window.webkitRequestFileSystem(
          TEMPORARY,  // 一時的(テンポラリ)
          0,    // サイズ
          function(fs){ // 成功時のコールバック関数
            // ファイルを削除
            var filename = document.getElementById("fsFilename").value;
            fs.root.getFile(filename, {},
              function(fileEntry){
                fileEntry.remove(function(){
                  var text = "ファイル"+fileEntry.name+"を削除しました。<br>";
                  document.getElementById("result").innerHTML = text;
                },
                function(err){  // 失敗時のコールバック関数
                  document.getElementById("result").innerHTML = "削除エラー!!<br>"+err;
                });
              },
              function(err){  // 失敗時のコールバック関数
                document.getElementById("result").innerHTML = "ファイル削除エラー!!<br>"+err;
              }
            );
          },
          function(err){  // 失敗時のコールバック関数
            document.getElementById("result").innerHTML = "エラー!!<br>"+err;
          }
        );
      }, false);
    </script>
  </body>
</html>

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています