FormData is een gedetailleerde introductie en gebruik https://developer.mozilla.org/zh ... ng_FormData_Objects
De methoden en gebeurtenissen van FormData zijn daar al heel duidelijk, dus ik zal er hier geen tijd aan verspillen. Dit artikel legt voornamelijk het gebruik van FormData-objecten en asynchrone bestandsuploads uit.
Het FormData-object stelt ons in staat een verzameling sleutel-waardeparen te organiseren die worden verzonden met het XMLHttpRequest-object. Het wordt voornamelijk gebruikt om formuliergegevens te verzenden, maar kan onafhankelijk worden gebruikt van de gegevens die via formulieren worden overgedragen.
1. Een FormData-object vanaf nul creëren
Je kunt je eigen FormData-object maken en vervolgens sleutel-waardeparen toevoegen aan het object via de append()-methode, zoals dit:
Opmerking: Zowel de velden "userfile" als "webmasterfile" bevatten bestanden. Het nummer dat aan het veld "accountnum" is toegewezen, wordt direct omgezet naar een string door de FormData.append()-methode (de waarde van het veld kan een blob, bestand of string zijn: als de waarde noch een blob noch een bestand is, wordt de waarde omgezet in een string).
2. Haal een FormData-object op uit een HTML-formulier
Om een FormData-object met bestaande formuliergegevens te verkrijgen, moet je het formulierelement specificeren bij het aanmaken van het FormData-object.
Zo:
Je kunt ook extra data toevoegen nadat je het FormData-object hebt ontvangen, zoals dit:
Dit stelt je in staat om extra informatie toe te voegen voordat je verzendt, niet per se door de gebruiker bewerkt.
3. Gebruik het FormData-object om het bestand te verzenden
Je kunt FormData gebruiken om bestanden te verzenden. Een eenvoudig <form>midden kan <input>een element bevatten:
Je kunt vervolgens de volgende code gebruiken om het te versturen:
Je kunt ook een bestand of blob direct toevoegen aan het FormData-object, zoals dit:
Bij gebruik van de append()-methode kan een derde parameter worden gebruikt om de bestandsnaam te verzenden (verzonden naar de server via de Content-Disposition-header). Als de derde parameter niet is gespecificeerd of deze parameter niet wordt ondersteund, wordt de derde parameter standaard "blob".
Als je de juiste opties instelt, kun je het ook met jQuery gebruiken:
|
Geplaatst op 08-05-2018 16:30:39
|
|
|
