Veebisaitide jaoks vormide loomine (praktiline õpetus)

Failide üleslaadimise tõhus rakendamine veebivormides

Kõik õpetuse videod Loo veebisaitidele vormide loomine (praktiline juhend)

Failide üleslaadimine võrguvormi kaudu on paljude kaasaegsete rakenduste ja veebisaitide oluline osa. Selles õpetuses õpid, kuidas tõhusalt rakendada sisend -elemendi tüüpi="fail" failide üleslaadimist. Saad aru, kuidas failivalimisprotsess toimib, kuidas tagada, et fail saadetakse serverile õigesti ning millised sätted on olulised. See juhend on mõeldud arendajatele, kes soovivad laiendada oma teadmisi HTML vormide ja failide üleslaadimise kasutamisel.

Olulisemad teadmised

  • Sisendi elemendi tüüp="fail" võimaldab kasutajatel faile üles laadida.
  • Õige vormitüübi ja enctype-atribuudi kasutamine on oluline faili üleslaadimiseks.
  • Saad JavaScripti abil luua kasutajasõbraliku liidese failide üleslaadimiseks.

Samm-sammuline juhend

Esiteks veendu, et põhiline HTML-vorm koos sisendi elemendiga tüüp="fail" on olemas.

Failide üleslaadimise tõhus rakendamine veebivormides

Selles kohalikus näites olen juba seadistanud sisendi elemendi tüübiga "Fail". Näed, et nupu kõrval on kirjas "faili pole valitud". Sisendi element tüübiga="fail" võimaldab kasutajatel valida ühe või mitu faili ning avada needjärgneva operatsioonisüsteemi failidialoogi kaudu.

Failide üleslaadimise tõhus rakendamine veebivormides

Valikuaken näeb erinev välja, sõltuvalt operatsioonisüsteemist, kas Windows, Linux või MacOS. Siin on minu näide MacOS-süsteemist, kust saad valida ühe või mitu faili. Kui klõpsad nupul "Ava", näidatakse valitud fail sisendväljal.

Failide üleslaadimise tõhus rakendamine veebivormides

Nüüd oled valinud faili ja see kuvatakse väärtusena sisendi elemendis. Vormi töötlemiseks kasutan meetodit GET.

Failide üleslaadimise tõhus rakendamine veebivormides

Pärast saad vormi esitada, kuid märkad, et ainult failinimi kuvatakse URL-is. See aga peaks muutuma, et kogu faili sisu serverile edastada.

Failide üleslaadimise tõhus rakendamine veebi vormides

Selleks muudame meetodi POST-iks. Et jälgida, mis saadetakse, mine Võrgu vahekaardile.

Failide üleslaadimise tõhus rakendamine veebivormides

Enne seda pead siiski veenduma, et oled valinud vähemalt ühe faili. Kui valid faili "image.jpg" ja esitad vormi, leidub see payload'is. Kiiresti märkad aga, et edastatakse ka siin ainult failinimi.

Failide üleslaadimise tõhus rakendamine veebivormides

Probleem seisneb selles, et enctype atribuut pole määratud. Selleks tuleb see määrata "multipart/form-data", et fail edastataks õiges andmevormingus.

Failide üleslaadimise tõhus rakendamine veebivormides

Selle enctype abil saad kindlustada, et server saab faili binäarandmed. Kui astud selle sammu, vali uuesti oma pildifail ja esita vorm uuesti.

Failide üleslaadimise tõhus rakendamine veebivormides

Nüüd näed, et edastamine sisaldab mitte ainult failinime, vaid ka binäarandmeid, mida server peab töötlema.

Server peab seejärel need binaarsed andmed dekodeerima. On oluline, et server tõlgendaks need andmed õigesti, et salvestada fail andmebaasi või serverisse.

Failide üleslaadimise tõhus rakendamine veebivormides

Vormi laiendamiseks saad lisada täiendavaid sisendi välju. Näiteks klassikaline tekstiväli, et saata pildi nimi koos pildifailiga.

Failide üleslaadimise tõhus rakendamine veebivormides

Andmed edastatakse seejärel tekstina ja binaarandmetena. See võimaldab mitmetasandilist töötlemist serveripoolselt.

Failide üleslaadimise tõhus rakendamine veebivormides

Veel üks kasulik aspekt on "multiple" implementeerimine, et kasutajad saaksid üles laadida mitu faili korraga.

Failide üleslaadimise tõhus rakendamine veebivormides

Kui lisad atribuudi "multiple", saavad kasutajad failidialoogis valida mitu faili.

Failide üleslaadimise tõhus rakendamine veebivormides

Pidage meeles, et peate lisama sündmuse kuulaja, et hallata valitud failinimesid, kui kasutajad oma faile valivad. See annab teile võimaluse ka juurde pääseda üleslaaditud failide arvule.

Failide üleslaadimise efektiivne rakendamine veebivormides

Lisaks saate määrata, milliseid failivorminguid kasutaja valida saab, kasutades atribuuti "accept".

Failide üleslaadimise tõhus rakendamine veebivormides

Kui soovite näiteks lubada ainult JPEG- või PNG-pilte, saate selle lihtsalt määrata sisendi deklaratsioonis, et valik vastaks operatsioonisüsteemile.

Saate määrata ka üldised vormingud abil image/*, et lubada kõigile pildifailidele valimine.

Failide üleslaadimise tõhus rakendamine veebivormides

Kui soovite rohkem teada saada "accept" atribuudi võimalustest, soovitan kasutada MDNi veebidokumentatsiooni.

Failide üleslaadimise tõhus rakendamine veebivormides

See dokumentatsioon pakub põhjalikku teavet sisendi elemendi kasutamise ja muude vormifunktsioonide kohta.

Kokkuvõte

Oled nüüd kogenud, kuidas luua lihtne veebivorm koos faili üleslaadimise sisendi elemendiga. Oleme käsitlenud põhilisi kontseptsioone, sealhulgas meetodeid, kuidas fail serverile edastatakse, ja millised atribuudid on vajalikud üleslaadimisprotsessi optimeerimiseks.

Korduma kippuvad küsimused

Mis vahe on GET ja POST meetodil failide üleslaadimisel?GET saadab URL-is ainult failinimed, samas kui POST edastab failisisu binaarandmetena.

Kuidas tagada, et fail edastatakse õiges vormis?Määra vormi enctype atribuut väärtusele multipart/form-data failide edastamiseks.

Kas saan valida mitu faili korraga?Jah, lisades sisendi märgisele atribuudi “multiple”.

Kuidas saan piirata valitavate failivormingute arvu?Kasuta sisendi märgisel atribuuti “accept” kindlate failivormingute määramiseks.

Kust leida lisateavet sisendi tüübi “fail” elemendi kohta?Mozilla Developer Network (MDN) on suurepärane allikas üksikasjaliku teabe ja näidete jaoks.