やりたいこと
Inputタグに対してファイルがアップロードした際に、JavaScriptでアップロードしたファイルのMIMEタイプを取得し画面に表示したい
やり方
※PCのブラウザはiphoneのheicファイルのMIMEタイプを取得できない
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ファイルのMIMEタイプ表示</title>
</head>
<body>
<h1>ファイルのMIMEタイプ表示</h1>
<input type="file" id="fileInput">
<p id="mimeTypeDisplay">MIMEタイプ: なし</p> <!-- 表示用の要素 -->
<script>
const fileInput = document.getElementById('fileInput');
const mimeTypeDisplay = document.getElementById('mimeTypeDisplay');
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0]; // 最初のファイルを取得
if (file) {
const mimeType = file.type; // MIMEタイプを取得
mimeTypeDisplay.textContent = 'MIMEタイプ: ' + mimeType; // 画面に表示
} else {
mimeTypeDisplay.textContent = 'MIMEタイプ: なし'; // ファイルが未選択の場合
}
});
</script>
</body>
</html>
こんな感じです
参考サイト