File Copy

Chrome でサーバーから起動して下さい。
複数ファイルを選択してコピーします。



【Source Code】
<input type="file" id="myfile" multiple />

<script type="text/javascript">
document.querySelector('#myfile').onchange =
  function(e)
  { var files = this.files;
    window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024,
      function(fs)
      { // Duplicate each file the user selected to the app's fs.
        for (var i = 0, file; file = files[i]; ++i)
        { // Capture current iteration's file in local scope for the getFile() callback.
          (function(f)
          { fs.root.getFile(file.name, {create: true, exclusive: true},
              function(fileEntry)
              { fileEntry.createWriter(
                  function(fileWriter)
                  { fileWriter.write(f); // Note: write() can take a File or Blob object.
                    // ファイル書き込み成功イベント
                    fileWriter.onwrite =
                    function() { window.alert("書き込み完了" + f.name); };
                  },
                  errorHandler);
              },
              errorHandler);
          })(file);
        }
      },
      errorHandler);
  };

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);
}
</script>

  1. input type="file" から複数のファイルを選択してローカルディスクにコピーします。
    複数のファイルを選択するときは multiple を設定して下さい。
    <input type="file" id="myfile" multiple />
    
  2. input type="file" id="myfile" でファイルが選択されたとき .onchange = function(e) が呼ばれます。
    var files = this.files; で選択された複数のファイルを取得します。
    webkitRequestFileSystem は RequestFileSystem を参照して下さい。
    document.querySelector('#myfile').onchange =
      function(e)
      { var files = this.files;
        window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024,
    
  3. function(fs) からは RequestFileSystem が成功したときの関数です。
    file; が空になるまで(選択されたファイルが無くなるまで)次の関数を繰り返します。
          function(fs)
          { // Duplicate each file the user selected to the app's fs.
            for (var i = 0, file; file = files[i]; ++i)
            { // Capture current iteration's file in local scope for the getFile() callback.
    
  4. fs.root.getFile() で file.name のファイルを作成します。
    fileEntry.createWriter() でファイルを書き出します。
              (function(f)
              { fs.root.getFile(file.name, {create: true, exclusive: true},
                  function(fileEntry)
                  { fileEntry.createWriter(
                      function(fileWriter)
                      { fileWriter.write(f); // Note: write() can take a File or Blob object.
    
  5. ファイルの書き込みが成功したときは window.alert("書き込み完了" + f.name); を表示します。
                        // ファイル書き込み成功イベント
                        fileWriter.onwrite =
                        function() { window.alert("書き込み完了" + f.name); };
                      },
                      errorHandler);
                  },
                  errorHandler);
              })(file);
            }
          },
          errorHandler);
      };
    
  6. function errorHandler(e) はエラーが発生したときの Handler です。
    エラーが発生した状況を多少なりとも解析して表示しています。
  7. ファイルがコピーされたことを確認する方法です。
    1. 例えば c:\tmp のフォルダーに memo.txt, temp.txt, work.txt を格納します。
    2. ファイル選択から3個のファイルを選びます。
    3. ファイルがローカルディスクにコピーされます。
      既に存在するとエラーが表示されます。
    4. TEMPORARY I-O を実行すると memo.txt の内容確認や memo.txt の削除が出来ます。
    5. 作成されたファイルの一覧は TEMPORARY List で確認できます。
    6. TEMPORARY Delete で Root Directory の TEMPORARY File を全て削除することが出来ます。

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