<html>
<head>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<input accept="image/*" type="file" id="uploadImage">
<p><img id="thumbnail" src=""></p>
</form>
<script>
uploadImage.onchange = event => {
const [file] = uploadImage.files
if (file) {
let reader = new FileReader();
reader.onload = (e) => {
let encodedData = btoa(
Array.from(
new Uint8Array(e.target.result),
x => String.fromCharCode(x)
).join('')
);
thumbnail.src = `data:image/png;base64,${encodedData}`;
}
reader.readAsArrayBuffer(file);
}
}
</script>
</body>
</html>
リンク
ArrayBuffer – JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
WindowOrWorkerGlobalScope.btoa() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/btoa
Uint8Array – JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array
String.fromCharCode() – JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode
