html5開檔與預覽圖片

 這裡簡短分享一下html5開圖檔並預覽的功能

使用input選擇圖片, img標籤顯示圖片

在body標籤底下寫上下面這段code

<input type="file" accept=".jpg,.jpeg,.png,.webp" onchange="setupPreview(event)">

<img id="thePreview" alt="Image preview" style="max-width: 500px;">

<script>

function setupPreview(e) {

e.preventDefault();

console.log('setupPreviewer')

const preview = document.getElementById('thePreview');

preview.src = URL.createObjectURL(e.target.files[0]);

preview.onload = function () {

URL.revokeObjectURL(preview.src) // free memory

}

}

</script>

img標籤之需要設定style是為了避免開的圖檔太大,整個畫面都顯示