More than 1 year has passed since last update.

JavaScript で画像・動画・音声アップロード時にプレビュー

JavaScript

Last updated at 2023-11-20Posted at 2023-05-29

画像・動画・音声ファイルをアップロードした時にクライアントのみでプレビュー表示までやってみる
サンプルは以下のページ

HTML
HTML にファイルアップロードの input タグとプレビュー用の img, video, audio タグを準備
input タグの onchange で JavaScript の処理を実行、this に選択したファイル情報が入ってくる
あと accept 属性でファイル種類を限定（他のファイル入力できちゃうけど．．．）

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="./style.css">
</head>

<body>

  <hr>
  <h4>画像アップ・プレビュー</h4>
  <input type="file" accept='image/*' onchange="preview(this, 'previewImage');">
  <br>
  <img class="preview" id="previewImage">

  <h4>動画アップ・プレビュー</h4>
  <input type="file" accept='video/*' onchange="preview(this, 'previewVideo');">
  <br>
  <video  class="preview" id="previewVideo" controls="controls"></video>

  <h4>音声アップ・プレビュー</h4>
  <input type="file" accept='audio/*' onchange="preview(this, 'previewAudio');">
  <br>
  <audio  class="preview" id="previewAudio" controls="controls"></audio>

</body>

<script src="script.js"></script>

</html>

JavaScript
JavaScript でプレビュー表示、FileReader を使ってやる

/**
 * ファイル選択時の処理
 * @param {HTMLInputElement} obj 入力ファイル
 * @param {String} previewId プレビュー表示DOMのID
 */
function preview(obj, previewId) {
    let fileReader = new FileReader();
    fileReader.onload = (function () {
        document.getElementById(previewId).src = fileReader.result;
    });
    fileReader.readAsDataURL(obj.files[0]);
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up