Caricamento di file

11.1 Elemento <input type="file">

Le applicazioni web richiedono spesso agli utenti di caricare file sul server. Questo può essere utile per il caricamento di documenti, immagini, video e altri tipi di dati. HTML fornisce l'elemento <input type="file"> per creare interfacce di caricamento file. Di seguito esamineremo in dettaglio l'uso di questo elemento e dei suoi attributi, come multiple e accept.

L'elemento <input type="file"> crea un'interfaccia che permette agli utenti di selezionare file dal loro dispositivo e caricarli sul server. È uno degli elementi chiave del form in HTML, che permette di integrare la funzionalità di caricamento file nelle applicazioni web.

Principali attributi dell'elemento <input type="file">

1. type="file" — determina che l'elemento è destinato alla selezione dei file.
2. name — imposta il nome dell'elemento che verrà usato quando i dati del form vengono inviati al server.
3. multiple — permette all'utente di selezionare più file contemporaneamente.
4. accept — indica i tipi di file che possono essere selezionati, usando MIME-types o estensioni di file.

Esempi di utilizzo dell'elemento <input type="file">

Esempio semplice

Ecco un esempio di base dell'elemento per il caricamento di un file senza attributi aggiuntivi:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Scegliere un file:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Carica</button>
      </form>
    
  

11.2 Attributo multiple

L'elemento <input type="file"> supporta diversi attributi che ne espandono le funzionalità. Esaminiamo due di essi: multiple e accept.

L'attributo multiple consente agli utenti di scegliere più file da caricare. Quando questo attributo è presente, gli utenti possono selezionare più file nella finestra di dialogo di selezione dei file.

Esempio di utilizzo:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="files">Scegliere i file:</label>
        <input type="file" id="files" name="files" multiple>
        <button type="submit">Carica</button>
      </form>
    
  

11.3 Attributo accept

L'attributo accept limita i tipi di file che possono essere selezionati dall'utente. Questo è utile per garantirti che gli utenti carichino solo tipi di file consentiti (ad esempio, solo immagini o documenti).

Esempio di utilizzo:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Scegliere un'immagine:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <button type="submit">Carica</button>
      </form>
    
  

L'attributo accept limita i tipi di file che possono essere selezionati. Questo può essere fatto per MIME-types o estensioni di file. Nell'esempio sopra, gli utenti possono scegliere solo file di immagini.

Esempi di valori dell'attributo accept

Limitazione per tipo di file:

• accept="image/*": qualsiasi immagine
• accept="video/*": qualsiasi file video
• accept="audio/*": qualsiasi file audio

Limitazione per estensione del file:

• accept=".jpg/.jpeg/.png": solo immagini nei formati JPEG e PNG
• accept=".pdf/.doc/.docx": solo documenti PDF e Word

11.4 Gestione dei file lato client

A volte è necessario gestire i file lato client prima di inviarli al server. Ad esempio, puoi visualizzare un'anteprima delle immagini o controllare la dimensione del file. Per fare ciò, si utilizza JavaScript.

Esempio di anteprima dell'immagine:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Scegliere un'immagine:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <div id="preview"></div>
        <button type="submit">Carica</button>
      </form>
    
  

    
      document.getElementById('image').addEventListener('change', function(event) {
        const preview = document.getElementById('preview');
        preview.innerHTML = '';

        const files = event.target.files;

        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          const reader = new FileReader();

          reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.maxWidth = '200px';
            preview.appendChild(img);
          }
          reader.readAsDataURL(file);
        }
      });
    
  

Spiegazione

• FileReader: usato per leggere il contenuto dei file lato client
• reader.onload: evento che si attiva quando il file è stato letto completamente
• reader.readAsDataURL(file): metodo che legge il file e lo codifica come Data URL, permettendo di visualizzarlo nel tag <img>

1

Sondaggio/quiz

Elementi dei form, livello 9, lezione 5

Non disponibile

Elementi dei form

Elementi dei form

Apri