✅ HTML5 - augšupielādēt failus

Satura rādītājs

Kad mums ir datu apkopošanas veidlapas vienā lapā HTML5 Papildus tam, ka mēs varam iegūt datus ar ievades veida laukiem, mēs varam arī augšupielādēt failus, tādējādi mēs varam paātrināt noteiktu datu ielādi, kurus nav iespējams izteikt tekstā vai kas var būt ļoti gari teksti, parasti ir augšupielādēt attēlu failus vai pdf failus, jo šie divi formāti ir ļoti populāri, tomēr ar Ajax mēs varam augšupielādēt gandrīz jebkura veida failus.
Augšupielādējiet failus
Uz augšupielādēt failus, izmantojot Ajax, mums ir jāizveido faila tipa lauks formā un savā ikdienā Ajax izmantot objektu FormData ar kuru mēs apkoposim datus, lai varētu tiem piešķirt nepieciešamo formātu un augšupielādēt savu failu serverī.
Objekts FormData tas jālieto piesardzīgi, jo joprojām var būt pārlūkprogrammu versijas, kas to pilnībā neatbalsta, tomēr tas ir diezgan stabils risinājums.
Tālāk redzēsim, kā augšupielādēt pamata failu:

 PiemērsBanāni:Āboli:Ķirši:Fails:Kopā:0 precesIesniegt formu

Iekļaujot faila tipa ievadi, objekts FormData automātiski veic pasākumus, lai mūsu failu varētu augšupielādēt serverī, nākamajā attēlā mēs varam redzēt, kā pārlūkprogramma to interpretē:

Šajā gadījumā tas bija diezgan viegls attēls, tāpēc faila augšupielādes laiks serverī nav pamanāms, taču, ja tas būtu 30 MB pdf, laiks būtu daudz ilgāks, jo lietotājam tas ir pārredzams, viņš varētu domāt, ka lapa nav "neko darīt" vai arī "domāja", lai no tā izvairītos, mēs varam iekļaut progresa joslu, ar kuru progress kļūst redzams.
Lai redzētu kāpšanas progresu, mēs izmantosim objektu XMLHttpRequest lai pārbaudītu pieprasījuma statusu Ajax:

 PiemērsBanāni:Āboli:Ķirši:Fails:Progress:Kopā:0 precesIesniegt formu

Mēs esam definējuši elementu progresu un ar viņu XMLHttpRequest objekts Augšupielādes laikā mēs varam piešķirt vērtības, pārlūkprogrammā mēs to varam redzēt šādi:

PALIELINĀT

Mēs varam izmantot Ajax Lai iegūtu vairāk nekā tikai konsultācijas par elementiem citās lapās, mēs varam to izmantot arī, lai uzlabotu savas veidlapas datu iegūšanā.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu