File APIとBlobで、サーバーに送らずファイルを処理する

選んだファイルをブラウザの中だけで読み、書き出す仕組みです。

ファイルを読む

<input type="file">で選んだFileは、text()やarrayBuffer()で読めます。この処理はすべて端末の中で行われ、サーバーに送信されません。

Blobで書き出す

結果はBlobにまとめ、URL.createObjectURLで作ったURLを<a download>に設定してクリックさせると保存できます。使い終わったらURL.revokeObjectURLで、メモリを解放します。

大きなファイルとaccept

大きなファイルは、メモリを多く使うため注意が必要です。accept属性は、選択ダイアログの絞り込みであって検証ではないので、中身の確認は別に行ってください。

この技術を使っているツール

ほか49本のツールでも使っています。