A FormData részletes bevezetés és használat https://developer.mozilla.org/zh ... ng_FormData_Objects
A FormData módszerei és eseményei ott már nagyon világosak, így itt nem fogok időt pazarolni rájuk. Ez a cikk főként a FormData objektumok és aszinkron fájlfeltöltések használatát magyarázza.
A FormData objektum lehetővé teszi, hogy az XMLHttpRequest objektum segítségével küldött kulcs-érték párok gyűjteményét szervezzük. Elsősorban űrlapadatok küldésére használják, de függetlenül is használható az űrlapokkal átadott adatoktól.
1. Hozzon létre egy FormData objektumot a nulláról
Létrehozhatsz saját FormData objektumodat, majd kulcs-érték párokat adhatsz hozzá az append() metódussal, így:
Megjegyzés: Mindkét "userfile" és "webmasterfile" mező fájlokat tartalmaz. Az "accountnum" mezőhöz rendelt számot közvetlenül egy stringjévé alakítják át a FormData.append() módszerrel (a mező értéke lehet folb, fájl vagy string: ha az érték sem folb, sem fájl, az értéket karakterláncgá alakítják). Ez a példa létrehoz egy FormData példányt a "username", "accountnum", "userfile" és "webmasterfile" mezőkkel, majd az XMLHttpRequest objektum send() módszerével küldi el az űrlapadatokat. A "webmasterfile" mező egy folt. A blob objektum egy fájlobjektum nyers adatait képviseli. De a blob által képviselt adatoknak nem feltétlenül kell a javascript natív formátumban lenniük. A fájlfelület blobokon alapul, örökli a blob funkciókat, és bővíti a felhasználói fájlrendszerek támogatását. Egy blob építéséhez a Blob() konstruktor hívható.
2. Szerezz egy FormData objektumot egy HTML űrlapból
Ahhoz, hogy megszerezhessünk egy meglévő űrlapadatokat tartalmazó FormData objektumot, meg kell határoznod a forma elemet a FormData objektum létrehozásakor.
Tetszik:
További adatokat is hozzáadhatsz a FormData objektum megszerzése után, például:
Ez lehetővé teszi, hogy további információkat adj hozzá küldés előtt, nem feltétlenül a felhasználó által szerkesztve.
3. Használd a FormData objektumot a fájl elküldéséhez
A FormData segítségével fájlokat küldhetsz. Egy egyszerű <form>középső <input>eleme tartalmazhat egy elemet:
Ezután a következő kóddal elküldheti:
Fájlt vagy Blobot is hozzáadhatsz közvetlenül a FormData objektumhoz, például:
Az append() metódus használatakor egy harmadik paraméter is elküldheti a fájlnevet (amely a Content-Disposition fejlécén keresztül küldi a szervernek). Ha a harmadik paraméter nincs megadva, vagy ez a paraméter nem támogatott, a harmadik paraméter alapértelmezetten "blob" lesz.
Ha beállítod a helyes beállításokat, használhatod jQuery-vel is:
|