JavaScript: visualizzare le dimensioni di un file in un form di upload

JavaScript: visualizzare le dimensioni di un file in un form di upload

Le API dei file sono uno strumento potente e versatile per gestire i file in JavaScript. Una delle loro funzionalità più utili è la capacità di leggere le dimensioni di un file caricato in un form di upload. In questo articolo vedremo come utilizzare le API File per ottenere le dimensioni di un file e formattarle in modo da renderle leggibili agli utenti.

Per utilizzare queste API in JavaScript, dobbiamo innanzitutto acquisire il file caricato dal form di upload. Possiamo farlo utilizzando la proprietà files dell'elemento input del form, che ci restituisce un array di oggetti File. Ad esempio, supponiamo di avere un form con un input file con ID file-input. Otteniamo un riferimento a tale elemento e accediamo alla sua proprietà files.

Una volta che abbiamo il file, possiamo utilizzare la proprietà size dell'oggetto File per ottenere la dimensione del file in byte. Tuttavia, la dimensione in byte può non essere immediatamente comprensibile per gli utenti, quindi potremmo volerla formattare in modo da renderla più leggibile. Ad esempio, potremmo volerla convertire in KB o MB.

Per convertire la dimensione in byte in KB o MB, possiamo utilizzare le seguenti funzioni:


function bytesToKB(bytes) {
    return (bytes / 1024).toFixed(2) + ' KB';
}

function bytesToMB(bytes) {
    return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
}

Una volta ottenute le dimensioni del file, possiamo visualizzarle nel nostro form di upload utilizzando la proprietà innerHTML dell'elemento HTML in cui vogliamo mostrare le dimensioni. Per fare ciò, usiamo l'evento change che verrà innescato ogni volta che l'utente seleziona un file.


const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', () => {
    const file = fileInput.files[0];
    const fileSize = file.size;
    const fileSizeKB = bytesToKB(fileSize);
    const fileSizeMB = bytesToMB(fileSize);
    const fileSizeElement = document.getElementById('file-size');
    fileSizeElement.innerHTML = `KB: ${fileSizeKB} - MB: ${fileSizeMB}`;
}, false);

In questo modo, abbiamo utilizzato le API dei file di JavaScript per ottenere e formattare le dimensioni di un file caricato in un form di upload. Questa funzionalità è particolarmente utile quando si vuole fornire agli utenti un'indicazione della dimensione del file che stanno per caricare, in modo da evitare di caricare file troppo grandi e limitare i problemi di performance e di spazio di archiviazione.

Torna su