FormData è un'introduzione dettagliata e un utilizzo https://developer.mozilla.org/zh ... ng_FormData_Objects
I metodi e gli eventi di FormData sono già molto chiari lì, quindi non perderò tempo su di essi. Questo articolo spiega principalmente l'uso degli oggetti FormData e del caricamento asincrono dei file.
L'oggetto FormData ci permette di organizzare una raccolta di coppie chiave-valore inviate utilizzando l'oggetto XMLHttpRequest. Viene utilizzato principalmente per inviare dati di moduli, ma può essere utilizzato indipendentemente dai dati trasferiti tramite moduli.
1. Creare un oggetto FormData da zero
Puoi creare il tuo oggetto FormData e poi aggiungere coppie chiave-valore all'oggetto tramite il metodo append(), come questo:
Nota: Entrambi i campi "userfile" e "webmasterfile" contengono file. Il numero assegnato al campo "accountnum" viene convertito direttamente in una stringa dal metodo FormData.append() (il valore del campo può essere un blob, un file o una stringa: se il valore non è né un blob né un file, il valore viene convertito in una stringa).
2. Ottenere un oggetto FormData da un modulo HTML
Per ottenere un oggetto FormData contenente dati form esistenti, è necessario specificare l'elemento form quando si crea l'oggetto FormData.
Così:
Puoi anche aggiungere dati aggiuntivi dopo aver ottenuto l'oggetto FormData, come questo:
Questo ti permette di aggiungere informazioni aggiuntive prima di inviare, non necessariamente modificate dall'utente.
3. Usa l'oggetto FormData per inviare il file
Puoi usare FormData per inviare file. Un <form>semplice terzo può <input>includere un elemento:
Puoi quindi utilizzare il seguente codice per inviarlo:
Puoi anche aggiungere un File o un Blob direttamente all'oggetto FormData, così:
Quando si utilizza il metodo append(), può essere usato un terzo parametro per inviare il nome del file (inviato al server tramite l'intestazione Content-Disposition). Se il terzo parametro non è specificato o questo parametro non è supportato, il terzo parametro di default è "blob".
Se imposti le opzioni corrette, puoi usarlo anche con jQuery:
|
Pubblicato su 08/05/2018 16:30:39
|
|
|
