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是為了避免開的圖檔太大,整個畫面都顯示

留言