November 14, 2024 javascript

Cara Menampilkan Preview Image dari Input File dengan Javascript

Pada artikel ini saya akan membahas tentang cara menampilkan preview gambar dari input file dengan javascript. Berikut caranya:

Buat sebuah input file dan image.

<input type="file" accept="image/*" />
<img />

Tambahkan event listener pada input file ketika file dipilih.

document.querySelector('input[type=file]')
    .addEventListener('change', e => {
        
    })

Buat url untuk gambar yang dipilih dengan URL.createObjectURL. Untuk mengambil gambarnya bisa lewat array pertama pada e.target.files.

document.querySelector('input[type=file]')
    .addEventListener('change', e => {
        const url = URL.createObjectURL(e.target.files[0]);
    })

Gunakan url yang telah dibuat sebagai nilai dari atribut src pada elemen image yang digunakan sebagai preview image.

document.querySelector('input[type=file]')
    .addEventListener('change', e => {
        const url = URL.createObjectURL(e.target.files[0]);
    
        document.querySelector('img')
            .setAttribute('src', url)
    })

Hapus url gambar yang dipreview dari memori ketika ada gambar baru yang dipilih dengan URL.revokeObjectURL.

document.querySelector('input[type=file]')
    .addEventListener('change', e => {
        const url = URL.createObjectURL(e.target.files[0]);
        const img = document.querySelector('img')
    
        img.setAttribute('src', url)

        img.onload = () => URL.revokeObjectURL(url)
    })

Hasil akhir.

<input type="file" accept="image/*" />
<img />

<script>
document.querySelector('input[type=file]')
    .addEventListener('change', e => {
        const url = URL.createObjectURL(e.target.files[0]);
        const img = document.querySelector('img')
    
        img.setAttribute('src', url)

        img.onload = () => URL.revokeObjectURL(url)
    })
</script>

Hasilnya.

Hasilnya