potisanのプログラミングメモ

趣味のプログラマーがプログラミング関係で気になったことや調べたことをいつでも忘れられるようにメモするブログです。はてなブログ無料版なので記事の上の方はたぶん広告です。記事中にも広告挿入されるみたいです。

HTML5&JS ファイルを選択して内容を読み込む

JavaScript HTML

HTML5からはINPUT要素にtype="file"が用意され、JavaScriptのFile API・Blob・TypedArrayと併せてファイル内容を読み込むことができます。以下に簡単なサンプルコードを示します。

ファイルインプットからFileList、Fileを取得する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
<script>
function f1()
{
  // IDを動的に指定する場合はdocument.getElementById()メソッドを使います。
   const files = file1.files;
   console.log(files);
}
</script>
</head>
<body>
<div style="padding-bottom:.5em;">ファイルを選択するとブラウザの開発者コンソールに情報を表示します。</div>
<div><label>ファイルの選択：<input type="file" id="file1" onchange="f1();"></label></div>
</body>
</html>

ファイルインプットからFileの情報を取得する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
<script>
function f1()
{
   const files = Array.from(file1.files);
   for (let file of files)
   {
       console.log({
           name:file.name,
           lastModified:Date(file.lastModified),
           size:file.size,
           type:file.type
       });
   }
}
</script>
</head>
<body>
<div style="padding-bottom:.5em;">ファイルを選択するとブラウザの開発者コンソールに情報を表示します。</div>
<div><label>ファイルの選択：<input type="file" id="file1" onchange="f1();" multiple></label></div>
</body>
</html>

ファイルインプットで選択したファイルの先頭5バイトを読み込む（`FileReader.readAsArrayBuffer()`）

FileReader.readAsArrayBuffer()メソッドでファイルデータの先頭5バイトを読み込みます。なお、FileはBlobを継承しているため、新しいAPIBlob.arrayBuffer()メソッド（MDN）を使うこともできます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
<script>
function f1()
{
   const files = Array.from(file1.files);
   // type="file"のinputにmultiple属性を付けていないのでファイルは常に1つです。
   if (files.length != 1)
       return;

   // ファイルリーダーを作成します。
   const reader = new FileReader();
   // ファイルデータ読み込み完了時の処理を指定します。
   reader.onloadend = (e) => {
       const data = new Uint8Array(reader.result.slice(0, 5));
       console.log(data);
   };
   // ファイルデータを読み込みます。
   reader.readAsArrayBuffer(files[0]);
}
</script>
</head>
<body>
<div style="padding-bottom:.5em;">ファイルを選択するとブラウザの開発者コンソールに情報を表示します。</div>
<div><label>ファイルの選択：<input type="file" id="file1" onchange="f1();"></label></div>
</body>
</html>