Kuidas üks või mitu faili üles laadida lihtsal viisil FormData abil

Selles postituses tutvume HTML5 spetsifikatsiooni osana moodsates veebibrauserites saadaval oleva liidesega FormData.

Näeme näiteid FormData kasutamisest koos Ajaxi, Angular 7, Ionic ja Reactiga.

Mis on FormData

FormData on lihtsalt andmestruktuur, mida saab kasutada võtmeväärtuste paaride salvestamiseks. Nii nagu selle nimi viitab, on see mõeldud vormiandmete hoidmiseks, st saate seda kasutada JavaScripti abil HTML-vormile vastava objekti loomiseks. See on enamasti kasulik, kui peate vormiandmeid saatma RESTful API lõpp-punktidesse, näiteks ühe või mitme faili üleslaadimiseks XMLHttpRequestliidese, fetch()API või Axios abil.

Objekti FormData saate luua, kiirendades liidest FormData newoperaatori abil järgmiselt:

const formData = new FormData() 

formDataViide viitab astme FormData. Andmepaaride lisamiseks ja nendega töötamiseks võite objektil kutsuda paljusid meetodeid. Igal paaril on võti ja väärtus.

Need on FormData objektide jaoks saadaval olevad meetodid:

  • append(): kasutatakse objektile võtme-väärtuse paari lisamiseks. Kui võti on juba olemas, lisatakse väärtus selle võtme algsele väärtusele,
  • delete(): kasutatakse võtme-väärtuste paari kustutamiseks,
  • entries(): tagastab objekti Iterator, mille abil saate loendi kaudu sirvida objekti võtmeväärtuste paare,
  • get(): kasutatakse võtme väärtuse tagastamiseks. Kui lisatakse mitu väärtust, tagastab see esimese väärtuse,
  • getAll(): kasutatakse määratud võtme kõigi väärtuste tagastamiseks,
  • has(): kasutatakse võtme kontrollimiseks,
  • keys(): tagastab objekti Iterator, mille abil saate objektis saadaolevad võtmed loetleda,
  • set(): kasutatakse objektile väärtuse lisamiseks määratud võtmega. See seob väärtuse, kui võti on juba olemas,
  • values(): tagastab objekti Iterator objekti FormData väärtuste jaoks.

Faili üleslaadimise näide vanilli JavaScripti abil

Vaatame nüüd vanilli JavaScripti abil failide üleslaadimise lihtsat näidet XMLHttpRequestja FormData.

Navigeerige oma töökausta ning looge ja index.htmlfailige järgmise sisuga:

   Parcel Sandbox 

Loome lihtsalt ID- identifitseeritava HTML-dokumendi app. Järgmisena lisame index.jsfaili sildi abil.

Seejärel looge index.jsfail ja lisage järgmine kood:

document.getElementById("app").innerHTML = ` 

File Upload & FormData Example

`; const fileInput = document.querySelector("#fileInput"); const uploadFile = file => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; formData.append("file", file); request.send(formData); }; fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files[0]); });

Kõigepealt sisestame elemendi oma HTML-lehele. Seda kasutatakse üleslaaditava faili valimiseks.

Järgnevalt küsime querySelector()meetodi abil faili sisendelemendi kohta .

Järgmisena määratleme uploadFile()meetodi, milles deklareerime kõigepealt   API_ENDPOINTmuutuja, mis hoiab meie faili üleslaadimise lõpp-punkti aadressi. Järgmisena loome XMLHttpRequestpäringu ja tühja FormDataobjekti.

Meetodi parameetrina edastatud faili võtmele lisamiseks kasutame FormData uploadFile()meetodit Lisa file. See loob võtme-väärtuste paari filevõtmega ja edastatud faili sisu väärtusena.

Edasi saadame päringu send()meetodi abil XMLHttpRequestja edastame FormDataargumendina objekti.

Pärast uploadFile()meetodi määratlemist kuulame elemendi muutussündmust ja kutsume   uploadFile()argumendina valitud failiga meetodit. Failile pääseb juurde event.target.filesmassiivist.

Selle koodiga liivakastist saate selle näite abil katsetada:

Mitme faili üleslaadimine

Mitme faili üleslaadimise toetamiseks saate ülaltoodud koodi hõlpsasti muuta.

Esiteks peate lisama elemendile multipleatribuudi :

Nüüd saate oma kettalt valida mitu faili.

Järgmisena muutke uploadFile()meetodit, et aktsepteerida failide massiivi argumendina ja lihtsalt massiiv läbi vaadata ja failid FormDataobjektile lisada :

const uploadFile = (files) => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; for (let i = 0; i < files.length; i++) { formData.append(files[i].name, files[i]) } request.send(formData); }; 

Lõpuks kutsuge argumendina meetod massiivi failidega:

fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files); }); 

Järgmisena saate vaadata neid täpsemaid õpetusi, kuidas kasutada FormDatanurkade, ioonide ja reaktsioonidega:

  • Kuidas postitada FormData nurga all 7
  • Reageeri & Axios FormData
  • Mitme faili üleslaadimine rakendusega Ionic 4 & FormData