FormData er en detaljert introduksjon og bruk https://developer.mozilla.org/zh ... ng_FormData_Objects
Metodene og hendelsene i FormData er allerede veldig tydelige der, så jeg skal ikke kaste bort tid på dem her. Denne artikkelen forklarer hovedsakelig bruken av FormData-objekter og asynkrone filopplastinger.
FormData-objektet lar oss organisere en samling av nøkkel-verdi-par sendt ved hjelp av XMLHttpRequest-objektet. Det brukes primært til å sende skjemadata, men kan brukes uavhengig av data som overføres via skjemaer.
1. Lag et FormData-objekt fra bunnen av
Du kan lage ditt eget FormData-objekt og deretter legge til nøkkel-verdi-par til objektet via append()-metoden, slik:
Merk: Både feltene "userfile" og "webmasterfile" inneholder filer. Nummeret som tildeles feltet "accountnum" konverteres direkte til en streng av FormData.append()-metoden (verdien av feltet kan være en blob, fil eller streng: hvis verdien verken er en blob eller en fil, konverteres verdien til en streng). Dette eksempelet oppretter en FormData-instans med feltene "username", "accountnum", "userfile" og "webmasterfile", og bruker deretter XMLHttpRequest-objektets send()-metode for å sende skjemadataene. Feltet "webmasterfile" er en klump. Et blob-objekt representerer rådataene til et filobjekt. Men dataene som representeres av blobben trenger ikke å være i JavaScript-originalformatet. Filgrensesnittet er basert på blobs, arver blob-funksjonalitet og utvider støtten for brukerfilsystemer. For å bygge en blob kan Blob()-konstruktøren kalles opp.
2. Få et FormData-objekt fra et HTML-skjema
For å hente et FormData-objekt som inneholder eksisterende formdata, må du spesifisere formelementet når du oppretter FormData-objektet.
Som dette:
Du kan også legge til ekstra data etter å ha hentet FormData-objektet, slik som dette:
Dette lar deg legge til tilleggsinformasjon før du sender, ikke nødvendigvis brukerredigert.
3. Bruk FormData-objektet for å sende filen
Du kan bruke FormData til å sende filer. Et enkelt <form>tredje kan <input>inkludere et element:
Du kan deretter bruke følgende kode for å sende den:
Du kan også legge til en fil eller blob direkte i FormData-objektet, slik som dette:
Når append()-metoden brukes, kan en tredje parameter brukes for å sende filnavnet (sendt til serveren via Content-Disposition-headeren). Hvis den tredje parameteren ikke er spesifisert eller denne parameteren ikke støttes, går den tredje parameteren som standard til "blob".
Hvis du setter riktige innstillinger, kan du også bruke det med jQuery:
|