<input type=file> în HTML

Câmpul pentru încărcarea fișierelor: utilizatorul alege unul sau mai multe fișiere de pe dispozitiv, filtrate după tip.

Sintaxă tag
<form method="post" enctype="multipart/form-data">
  <input type="file" name="cv" accept=".pdf">
</form>

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 lui method="get": serverul nu primește conținutul fișierului.
  • Încrederea în accept ca 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ă.