Ładowanie zdjęcia - wykrywanie zdarzenia

Question

Podczas ładowania na stronę, przed submitowaniem, chcę pokazać je załadowane w miniaturce. Napisałem funkcję, która to wykonuje. Nie wiem jednak jak wykryć zdarzenie, przy którym funkcja ta mogłaby być wywoływana. Próbowałem użyć eventu 'load', lecz nie działa. Znalazłem takie rozwiązanie:

<input class="sth" id="file" name="sth" type="file" onchange="showPreview(event);">

jednak szukam kodu wykonywanego tylko w js.

Answer 1

document.getElementById('file').addEventListener('change', () => {
    // Your code to preview image.
});

Lub jeśli piszesz w jQuery (czego już raczej nie powinno się robić):

$('#file').change(() => {
  // Your code
})

 

Comments

Wielkie dzięki. Przed załadowaniem zdjęcia na ekranie wyświetla się taka miniaturka:

W jaki sposób mogę wyśrodkować napis "Image Preview"? Bezskutecznie próbowałem  użyć tych właściwości:

.classname img[alt] {
    /* line-height: 140px; */
    /* text-align: center; */
    /* vertical-align: middle; */
} 

Dodatkowo nie wiem jak pozbyć się tej ikony niewczytanego zdjęcia.

---

Wstaw tag <img> gdzie jako atrybut src dodasz jakiś obrazek zastępczy np 

https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fs3.amazonaws.com%2FFringeBucket%2Fimage_placeholder.png&f=1&nofb=1

następnie po załadowaniu zdjęcia prze użytkownika podmień ten atrybut załadowanym zdjęciem, dzięki czemu obrazek zastępczy zostanie zastąpiony podglądem zdjęcia.

---

Faktycznie, nie pomyślałem o takim rozwiązaniu, dzięki. Spróbuję tak zrobić, ale czy teoretycznie dałoby się to wykonać beż ładowania zdjęć (np. żeby nie obciążać procesu renderowania)?

---

Czyli żeby nie było żadnego obrazka zastępczego zanim nie załaduje się zdjęcia? Nie testowałem takiego rozwiązania ale możesz spróbować do <input type="file" /> dodać klasę np d-none

.d-none {
  display: none
}

Następnie w Js usuwać tą klasę gdy zostanie załadowane zdjęcie do uploadu:

document.getElementById('file').addEventListener('change', (e) => {
    e.target.classlist.remove('d-none')
    // Your code to preview image.
});

 

---

Super, dzięki jeszcze raz.