<input type="file">

Gli elementi <input> con type="file" consentono all'utente di scegliere uno o più file dalla memoria del proprio dispositivo. Una volta scelti, i file possono essere caricati su un server utilizzando l' invio di moduli o manipolati utilizzando il codice JavaScript e l'API File .

Valore

L'attributo value di un input di file contiene una stringa che rappresenta il percorso dei file selezionati. Se l'utente ha selezionato più file, valuerappresenta il primo file nell'elenco dei file selezionati. Gli altri file possono essere identificati utilizzando la proprietà dell'input HTMLInputElement.files.

Attributi aggiuntivi

Oltre agli attributi comuni condivisi da tutti gli elementi <input>, gli input di tipo filesupportano anche i seguenti attributi.

accept

Il valore dell'attributo accept è una stringa che definisce i tipi di file che l'input del file deve accettare. Questa stringa è un elenco separato da virgole di identificatori di tipo di file univoci . Poiché un determinato tipo di file può essere identificato in più di un modo, è utile fornire un set completo di identificatori di tipo quando sono necessari file di un determinato formato.

Ad esempio, ci sono diversi modi in cui è possibile identificare i file di Microsoft Word, quindi un sito che accetta file di Word potrebbe utilizzare un <input> simile:

<input type="file" id"docpicker"
  accept=".doc, .docx,application/msword,application/vnd.openxmlformats-o
  fficedocument.wordprocessingml.document">

capture

Il valore dell'attributo capture è una stringa che specifica quale telecamera utilizzare per acquisire dati di immagini o video, se l'attributo accept indica che l'input deve essere di uno di questi tipi. Un valore di userindica che è necessario utilizzare la fotocamera e/o il microfono rivolti verso l'utente. Un valore di environment specifica che è necessario utilizzare la fotocamera e/o il microfono rivolti verso l'esterno. Se questo attributo manca, lo user agent è libero di decidere da solo cosa fare. Se la modalità di fronteggiamento richiesta non è disponibile, l'interprete potrebbe tornare alla modalità predefinita preferita.

multiple

Quando multiple viene specificato l'attributo booleano, l'input del file consente all'utente di selezionare più di un file.

Attributi non standard

Oltre agli attributi sopra elencati, su alcuni browser sono disponibili i seguenti attributi non standard. Dovresti cercare di evitare di usarli quando possibile, poiché ciò limiterà la capacità del tuo codice di funzionare nei browser che non li implementano.

webkitdirectory

L'attributo booleano webkitdirectory, se presente, indica che solo le directory devono essere disponibili per essere selezionate dall'utente nell'interfaccia di selezione file.

Sebbene originariamente implementato solo per i browser basati su WebKit, webkitdirectory è utilizzabile anche in Microsoft Edge e Firefox 50 e versioni successive. Tuttavia, anche se ha un supporto relativamente ampio, non è ancora standard e non dovrebbe essere utilizzato a meno che tu non abbia alternative.

Identificatori univoci del tipo di file

Un identificatore di tipo di file univoco è una stringa che descrive un tipo di file che può essere selezionato dall'utente in un elemento <input> di tipo file. Ciascun identificatore di tipo di file univoco può assumere una delle seguenti forme:

• Un'estensione del nome file valida senza distinzione tra maiuscole e minuscole, che inizia con un punto ("."). Ad esempio: .jpg, .pdf, o .doc.
• Una stringa di tipo MIME valida, senza estensioni.
• La stringa audio/* che significa "qualsiasi file audio".
• La stringa video/* che significa "qualsiasi file video".
• La stringa image/* che significa "qualsiasi file immagine".

L'attributo accept accetta una stringa contenente uno o più di questi identificatori di tipo di file univoci come valore, separati da virgole. Ad esempio, un selettore di file che necessita di contenuto che può essere presentato come un'immagine, inclusi formati di immagine standard e file PDF, potrebbe avere il seguente aspetto:

<input type="file" accept="image/*,.pdf">