Cauta rapid aici ↑

HTML Media Capture si rolul atributelor capture si accept pe campul de tip input file din formular

Nu intamplator titlul acestui tutorial este atat de lung si explicit. Atributele capture si accept sunt foarte utile si ne ajuta pe noi programatorii pe partea de client (frontend developer) sa ii spunem browser-ului ce tip de fisier ne dorim de la utilizator in momentul cand acesta efectueaza click pe input-ul de tip file.

Atributul capture

Rolul acestui atribut este de a declansa crearea unei capturi, instantanee, ce va contine un anumit tip de informatie. Acest atribut este de tip boolean si nu primeste nici-o valoare, se scrie doar acest atribut. Tipul de informatie pe care in asteapta este dat de celalant atribut, atributul accept.

Atributul accept

Asa cum spuneam mai sus, rolul acestui atribut este de a-i spune browser-ului ce tip de informatie ne intereseaza de la utilizator. Valorile pentru acest atribut sunt o multime, insa pe noi ne intereseaza doar o mica parte. Acestea sunt:

  • image/*
  • image/png
  • image/jpeg
  • image/gif
  • audio/*
  • audio/mp3
  • video/*
  • video/mp4
  • text/plain
  • text/html
  • application/javascript
  • application/pdf

In momentul cand atributul accept are una din valorile de mai sus, mai mult sau mai putin ultimile trei, si in momentul cand se efectueaza click pe input-ul de tip file in browser, browser-ul va deschide o fereastra cu cel mai adesea doua optiuni. Prima optiune face referire la tipul de informatie care este trecuta in atributul accept (fisiere imagine, fisiere audio, fisiere video, fisiere personalizate etc.). A doua optiune este pentru toate tipurile de fisiere care se gasesc in acel moment pe acel dispozitiv mobil sau de birou.

Pe dispozitivele mobile, in special cele care au platforma Android (stiu asta pentru ca am testat pe telefonul meu), prezenta doar a atributului accept face ca browser-ul sa iti deschida o mica fereastra prin care te lasa sa alegi ce tip de fisier vrei sa incarci in pagina web. In momentul in care este prezent si atributul boolean capture, acest comportament se schimba iar browser-ul nu ne mai intreaba ce tip de fisier dorim sa incarcam. Asa cum spuneam mai sus, rolul atributului capture este de a declansa crearea unei capturi si din acest motiv browser-ul va declansa si activa microfonul pentru fisierele de tip audio, va declansa si activa camera video pentru fisierele de tip imagine sau video iar pentru celelante iti va afisa fereastra prin care te lasa sa alegi ce tip de fisier vrei sa incarci.

Mai jos va arat codul HTML prin care intr-un formular sunt mai multe input-uri de tip file care au un scop anume, dar si exemplul live pe care il puteti testa pe orice dispozitiv fie mobil sau fix.