Šajā padomā es tev parādīšu, kā ar JavaScript palīdzību varēsi apstrādāt unikālos failus, kas ir atlasīti caur Ievades lauku. Ir iespējams rediģēt atlasītos failus, tos lokāli parādīt un pat ģenerēt priekšskatu, neaugšupielādējot tos uz serveri. Šīs zināšanas ir īpaši noderīgas, ja vēlies izveidot lietotājam draudzīgus veidlapas ar failu augšupielādes funkcijām. Uzreiz ielaidīsimies detaļās!
Svarīgākie secinājumi
- Tu mācīsies, kā ar JavaScript piekļūt Ievades elementu failiem, tos attēlot un ģenerēt priekšskatu.
- Turklāt tu apgūsi, kā pielāgot attēlotu attēlu izmēru un kā nodrošināt visu bez veidlapas.
Pamācība soli pa solim
Lai ieviestu funkcionalitāti, tu vispirms vajadzēs HTML Ievades elementu un nedaudz JavaScript. Zemāk es izskaidrošu katru soli.
Solis 1: HTML uzstādījums
Pirmkārt, jāizveido HTML dokumentu, kas satur Faila Ievades elementu. Izmanto pareizo ID, lai vēlāk varētu piekļūt tam.
Solis 2: Pievienot JavaScript
Pievieno JavaScript skriptu tavas HTML dokumenta beigās. Ar to varēsi piekļūt Ievades elementam un ieviest savu loģiku. Pirmajā solī skriptā ir jāatrod Ievades elements ar getElementById metodi.
Solis 3: Pasākumu klausītājs izveidošana
Tagad izveido pasākumu klausītāju priekš change pasākuma. Šis pasākums tiek aktivizēts, kad tiek atlasīts fails. Iekšienējā atsauces apstrāde norāda, kā rīkoties ar atlasītajiem failiem.
Solis 4: Piekļuve failam(iem)
Iekšienējā atsauces funkcijā tu iegūsi piekļuvi atlasītajiem failiem caur Ievades elementa failiem. Šis īpašums atgriež tev līdzīgu masīvveida objektu, kurš satur visas atlasītās datnes.
Solis 5: Datņu caurbraukšana un attēlošana
Tagad ir laiks iterēt katru atlasīto failu un to attēlot. Tu vari izveidot -elementu, kas attēlo faila priekšskatu, izmantojot funkciju URL.createObjectURL().
Solis 6: Attēla lieluma pielāgošana
Šajā posmā ļoti vienkārši varēsi mainīt attēlu izmēru. Šeit ieteicami ir stingri izmēri kā 100x100 pikseļi vai, ja vēlies lielāku brīvību, izmanto sākotnējo augstumu un platumu.
Solis 7: Vairāku failu apstrāde
Sistēmai būtu jāvar izturēties ne tikai ar vienu failu, bet arī ar vairākiem failu atlases iespējamām izcilām spējām. Ievies loģiku, lai apstrādātu katru failu atsevišķi un attēlotu tos tavā vietnē.
Solis 8: Priekšskata ieviešana
Tagad vari rādīt vienkāršu priekšskatu lietotājiem. Lietotājs var nekavējoties redzēt, kādus failus viņš ir atlasījis, pirms tos augšupielādē.
Solis 9: Failnosaukumu rādīt kā rīka padomu
Lai uzlabotu lietotāja pieredzi, vari iekļaut faila nosaukumu kā rīka padomu attēla tagā. Tas ir īpaši noderīgi, ja tiek augšupielādēti vairāki faili.
Solījums 10: Identifikācijas nodrošināšana
Ir arī laba ideja nodrošināt, ka lietotāji var identificēt augšupielādētās datnes, pievienojot nosaukumu zem katras attēla vai kā alternatīvu tekstu attēliem.
Kopsavilkums
Šajā ceļvedī tu mācījies, kā piekļūt vietējām datnēm un parādīt tās savā tīmekļa veidlapā, izmantojot JavaScript. Tu vari kontrolēt attēlu izmērus, ievietot rīka padomus un nodrošināt lietotājam draudzīgu priekšskatu, visu bez datņu augšupielādes uz serveri. Šie prasmi ir būtiskas datņu augšupielādes un mijiedarbības veikšanai mūsdienu tīmekļa lietojumprogrammās.
Bieži uzdotie jautājumi
Kā piekļūt ar JavaScript izvēlētajām datnēm?Tu vari izmantot Input elements files-Property, lai piekļūtu izvēlētajām datnēm.
Vai es varu lokāli rediģēt augšupielādētās datnes?Jā, tu vari lokāli rediģēt datnes, piemēram, izmantojot Canvas elementu, lai ģenerētu sīktēlu.
Kā parādīt priekšskatu izvēlētajām datnēm?Izveidojot Image elementus un uzstādot src atribūtu uz radīto Object-URL, tu vari parādīt priekšskatu.
Vai es varu parādīt datnes nosaukumu zem attēla?Jā, tu vari pievienot datnes nosaukumu zem attēla vai izmantot to kā alternatīvu tekstu.
Vai es varu izvēlēties vairākas datnes vienlaicīgi?Jā, tu vari izvēlēties vairākas datnes, izmantojot multiple atribūtu Input elementā.
