URL.createObjectURL()とURL.revokeObjectURL()を使ったサンプル。
URL.createObjectURL(Fileオブジェクト)とURL.revokeObjectURL(Blobオブジェクト)を使う。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<style>
</style>
</head>
<body>
画像からBlob URLを生成する。<br>
<br>
<form id='fileInfo'>
<input type='file' id='fileInput' multiple name='files'>
</form>
<br>
<button id="button">画像を読み込む</button>
<br>
<br>
<div id="test">
</div>
<script>
// 画像からBlob URLを生成する。
const loadImg = (function() {
const fileInput = document.getElementById('fileInput');
const Button = document.getElementById('button');
const testElement = document.getElementById('test');
// 新しいImageオブジェクトを作成
const imgElement = new Image();
const getImage2 = async function() {
const file = fileInput.files[0];
if (imgElement.src) {
URL.revokeObjectURL(imgElement.src);
console.warn('URL.revokeObjectURL(imgElement.src)を実行した。');
} else {
console.log('else imgElement.src = ', imgElement.src);
}
imgElement.src = URL.createObjectURL(file);
// 以前の画像をクリア
if (testElement) {
testElement.innerHTML = ''; // すべての子要素をクリア
}
console.log('imgElement.src = ', imgElement.src);
testElement.appendChild(imgElement);
};
// 実行する。
Button.addEventListener('click', () => getImage2());
})();
</script>
</body>
</html>
関連
【JavaScript】URL.createObjectURL()とURL.revokeObjectURL() その1【中級者】 (attacktube.com)