Ce face <input type=file>
<input type="file"> afișează un buton „Alege fișierul” și numele fișierului selectat. La clic se deschide fereastra sistemului pentru alegerea fișierelor; pe telefon, utilizatorul poate alege și o poză din galerie sau poate face una pe loc.
Ca fișierul să ajungă la server, formularul trebuie să aibă method="post" și enctype="multipart/form-data". Fără enctype, serverul primește doar numele fișierului, nu conținutul.
accept filtrează ce fișiere apar în fereastra de alegere (după extensie, ca .pdf, sau după tip MIME, ca image/*), dar utilizatorul poate ocoli filtrul. Tipul și mărimea fișierului se verifică mereu pe server. Din motive de securitate, JavaScript nu poate seta un fișier în câmp, iar value arată un drum fals, C:\fakepath\nume.pdf.
Atribute
| Atribut | Descriere |
|---|---|
accept |
Tipurile acceptate: extensii (.pdf,.docx), tipuri MIME (image/png) sau grupuri (image/*). |
multiple |
Permite alegerea mai multor fișiere deodată. |
capture |
Pe telefon, deschide direct camera: user (camera frontală) sau environment (camera din spate). |
required |
Formularul nu se trimite fără cel puțin un fișier. |
name |
Numele câmpului; în PHP fișierul apare în $_FILES['nume']. |
Exemple
Exemplul 1: Încărcarea unui CV în format PDF
enctype face ca fișierul să fie trimis complet, iar accept arată doar fișierele PDF în fereastra de alegere.
<form action="/cariere" method="post" enctype="multipart/form-data">
<label for="cv">CV-ul tău (PDF)</label>
<input type="file" id="cv" name="cv" accept=".pdf,application/pdf" required>
<button>Aplică</button>
</form>
Ce afișează browserul
Butonul „Alege fișierul” urmat de textul „Niciun fișier ales”.
După alegere apare numele, de exemplu „CV_Ana_Popescu.pdf”, iar serverul primește conținutul fișierului.
Exemplul 2: Mai multe poze, cu deschiderea camerei pe telefon
Cu multiple și numele poze[], PHP primește toate fișierele într-un tablou.
<form action="/anunt" method="post" enctype="multipart/form-data">
<label for="poze">Pozele apartamentului din Iași</label>
<input type="file" id="poze" name="poze[]"
accept="image/*" multiple>
</form>
Ce afișează browserul
Pe calculator: fereastra de alegere arată doar imagini și permite selectarea mai multor fișiere; apoi apare „3 fișiere”.
Pe telefon: meniul oferă galeria sau camera foto.
Greșeli frecvente
- Uitarea lui
enctype="multipart/form-data"sau folosirea luimethod="get": serverul nu primește conținutul fișierului. - Încrederea în
acceptca măsură de securitate: utilizatorul poate alege orice fișier, deci tipul și mărimea se verifică pe server. - Încercarea de a pune un fișier în câmp cu JavaScript prin
value: browserul nu permite, din motive de securitate.
Comenzi înrudite
<form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.<input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.<label>: Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.<button>: Element clicabil pentru declanșarea trimiterii formularelor sau a unor acțiuni JavaScript în pagină.