画像・動画・音声ファイルをドラッグ＆ドロップしてクライアントのみでプレビュー表示までやってみる
サンプルは以下のページ
HTML
HTML に ファイルドラッグの divタグ をつくり inputタグ, プレビュー用の img, video, audio タグを準備
inputタグは非表示 display: none を CSS で設定
label タグで inputタグを囲って pタグ にファイル入力・入力ファイル名を表示できるように準備
ファイルドラッグの div タグ に ondrop, ondragover で処理実行
<!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>
<div class="filearea" id="image" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<label>
<input type="file" accept='image/*' onchange="preview(this, 'preview-image');">
<p class="selecter">＋ファイル選択 または ファイルドロップ</p>
<p class="select-file" id="preview-image-file">選択されてません</p>
<img class="preview pre-select" id="preview-image">
</label>
</div>
<h4>動画アップ・プレビュー</h4>
<div class="filearea" id="video" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<label>
<input type="file" accept='video/*' onchange="preview(this, 'preview-video');">
<p class="selecter">＋ファイル選択 または ファイルドロップ</p>
<p class="select-file" id="preview-video-file">選択されてません</p>
<video class="preview pre-select" id="preview-video" controls="controls"></video>
</label>
</div>
<h4>音声アップ・プレビュー</h4>
<div class="filearea" id="audio" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<label>
<input type="file" accept='audio/*' onchange="preview(this, 'preview-audio');">
<p class="selecter">＋ファイル選択 または ファイルドロップ</p>
<p class="select-file" id="preview-audio-file">選択されてません</p>
<audio class="preview pre-select" id="preview-audio" controls="controls"></audio>
</label>
</div>
</body>
<script src="script.js"></script>
</html>
JavaScript
drop で event.dataTransfer.files よりファイル情報取得して処理
drag は 既定処理をキャンセルする
/**
* @param {HTMLInputElement} obj 入力情報
* @param {String} previewId プレビュー表示DOMのID
*/
function preview(obj, previewId) {
previewFile(obj.files, previewId);
}
/**
* @param {File} files 入力ファイル
* @param {String} previewId プレビュー表示DOMのID
*/
function previewFile(files, previewId) {
let fileReader = new FileReader();
fileReader.onload = (function () {
document.getElementById(previewId).src = fileReader.result;
document.getElementById(`${previewId}-file`).innerText = files[0].name;
});
fileReader.readAsDataURL(files[0]);
}
/**
* @param {Event} event
*/
function dropHandler(event) {
event.preventDefault();
if (event.dataTransfer.files.length === 0) return false;
const files = event.dataTransfer.files;
const previewId = `preview-${event.currentTarget.id}`;
previewFile(files, previewId);
}
/**
* @param {Event} event
*/
function dragOverHandler(event) {
event.preventDefault();
}