JavaScript Academy · Lezione

Blob e URL per oggetti

Crei e usi URL blob per i download.

Blob e URL per oggetti è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cos'è un Blob?

Un Blob (oggetto binario di grandi dimensioni) rappresenta dati grezzi immutabili, come il contenuto di un file, archiviati in memoria. I file sono un tipo speciale di Blob con un nome e una data di modifica.

I Blob consentono di creare, suddividere e scaricare dati binari nel browser.

Creazione di un Blob

Crei un Blob a partire da un array di parti, che possono essere stringhe, buffer o altri Blob, e da un oggetto di opzioni che specifica il type MIME.

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

console.log(blob.size);
console.log(blob.type);

Blob da più parti

L'array delle parti viene concatenato nell'ordine indicato. È possibile combinare stringhe e array tipizzati.

const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
  type: 'text/plain'
});

console.log(blob.size + ' bytes');

Rilettura di un Blob

I Blob espongono i metodi basati su Promise text(), arrayBuffer() e stream() per leggerne il contenuto.

async function show() {
  const blob = new Blob(['stored data'], { type: 'text/plain' });
  const text = await blob.text();
  console.log(text);
}

show();

Suddivisione di un Blob

blob.slice(start, end) restituisce un nuovo Blob che contiene una parte dell'originale, senza copiarlo interamente. È utile per i caricamenti a blocchi.

const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);

console.log(chunk.size);

Creazione di un URL oggetto

URL.createObjectURL(blob) restituisce un URL di breve durata che punta al Blob presente in memoria. È possibile usarlo come img.src, come href di un link o come sorgente di un video.

const blob = new Blob(['data'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log(url.startsWith('blob:'));

Anteprima di un'immagine caricata

Trasformi un file selezionato in un URL oggetto e lo assegni a un elemento immagine per ottenere un'anteprima immediata, senza dover contattare il server.

const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;

console.log('preview ready');

Avvio di un download

Crei un Blob, generi un URL oggetto e faccia clic su un'ancora temporanea con un attributo download per salvare un file generato.

function download(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

download('report data', 'report.txt');

Revoca degli URL oggetto

Gli URL oggetto mantengono il Blob in memoria finché non chiama URL.revokeObjectURL(url). Li revochi sempre al termine dell'utilizzo per evitare perdite di memoria.

const blob = new Blob(['temp'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');

Blob e JSON

È possibile creare un file JSON scaricabile convertendo i dati in una stringa e inserendoli in un Blob con il tipo MIME corretto.

const data = { name: 'Ada', score: 99 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});

console.log(blob.type);
console.log(blob.size + ' bytes');

Perché i Blob sono importanti

I Blob e gli URL oggetto consentono di gestire i dati binari interamente sul client: visualizzare in anteprima i caricamenti, generare download e suddividere i file di grandi dimensioni. Si ricordi di revocare gli URL al termine dell'utilizzo. Ora invierà i file a un server con fetch.

const blob = new Blob(['export'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
console.log('csv url created:', url.startsWith('blob:'));
URL.revokeObjectURL(url);

Verifica rapida

Dopo aver usato un URL oggetto per un download, quale metodo dovrebbe chiamare per liberare la memoria?

Riepilogo: Blob e URL oggetto

Ha imparato a gestire i dati binari:

new Blob(parts, { type }) crea dati binari immutabili.
Li legga con text() e arrayBuffer(); li suddivida con slice().
URL.createObjectURL crea un URL blob: utilizzabile per anteprime e download.
Chiami sempre URL.revokeObjectURL al termine per liberare la memoria.

Domande Frequenti

La lezione «Blob e URL per oggetti» è gratuita?

Sì — il testo completo di «Blob e URL per oggetti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Blob e URL per oggetti»?

Crei e usi URL blob per i download. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Blob e URL per oggetti»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy