画像・動画・音声ファイルをアップロードした時にクライアントのみでプレビュー表示までやってみる
サンプルは以下のページ
-
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]); }