やりたいこと
Inputタグに対してファイルがアップロードした際に、JavaScriptでアップロードしたファイルのマジックナンバーを取得し画面に表示したい
やり方
※ファイルの拡張子を変更しても、マジックナンバーは変わらない
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ファイルのマジックナンバー取得</title>
</head>
<body>
<h1>ファイルのマジックナンバー表示</h1>
<input type="file" id="fileInput">
<p id="magicNumberDisplay">マジックナンバー: なし</p> <!-- 表示用の要素 -->
<script>
const fileInput = document.getElementById('fileInput');
const magicNumberDisplay = document.getElementById('magicNumberDisplay');
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0]; // 最初のファイルを取得
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const arrayBuffer = e.target.result;
const uint8Array = new Uint8Array(arrayBuffer).subarray(0, 4); // 先頭4バイトを取得
let magicNumber = "";
// 16進数に変換してマジックナンバーとして表示
for (let i = 0; i < uint8Array.length; i++) {
magicNumber += uint8Array[i].toString(16).padStart(2, '0') + " ";
}
magicNumberDisplay.textContent = 'マジックナンバー: ' + magicNumber.trim(); // 画面に表示
};
// ファイルの先頭部分をArrayBufferとして読み込む
reader.readAsArrayBuffer(file.slice(0, 4)); // 先頭4バイトを取得
} else {
magicNumberDisplay.textContent = 'マジックナンバー: なし'; // ファイルが未選択の場合
}
});
</script>
</body>
</html>
こんな感じです
参考サイト