Šiame vadovėlyje parodysiu, kaip su JavaScript valdyti vietinių failų prieigą, kurie buvo pasirinkti naudojant įvesties lauką. Galite redaguoti pasirinktus failus, juos rodyti vietiniame įrenginyje ir net generuoti peržiūrą, nesielgiant į serverį. Šios žinios yra ypač naudingos, jei norite kurti vartotojo draugiškus formos su failų įkėlimo funkcijomis. Iš karto panagrinėkime detales!
Svarbiausios išvados
- Sužinosite, kaip naudodami JavaScript pasiekti įvesties lauko failus, juos rodyti ir generuoti peržiūras.
- Be to, sužinosite, kaip keisti rodomų vaizdų dydį ir viską įgyvendinti neturint formos.
Laipsnis-prieš-laipsnį-vadovas
Siekiant įdiegti funkcionalumą, pirmiausia reikia sukurti HTML įvesties elementą ir šiek tiek JavaScript. Tolimesniuose skyriuose pateikiamos atskiros žingsnių instrukcijos.
Žingsnis 1: HTML nustatymas
Pirmiausia turite sukurti HTML dokumentą, kuriame yra failų įvesties elementas. Vėliau galėsite prie jo prisijungti, naudodami teisingą ID.
Žingsnis 2: Pridėti JavaScript
Pridėkite JavaScript scenarijų prie HTML dokumento pabaigos. Tai leidžia pasiekti įvesties elementą ir įgyvendinti savo logiką. Pirmasis žingsnis scenarijuje yra įvesties elemento gavimas naudojant getElementById metodą.
Žingsnis 3: Įvykio klausytojo nustatymas
Dabar nustatote įvykio klausytoją, skirtą keisti įvykio atvejui. Šis įvykis suaktyvinamas, kai pasirenkamas failas. Įvykio klausytojo viduje tvarkote pasirinktus failus.
Žingsnis 4: Prieiga prie failo(-ų)
Atvykdami į atspirktinę funkciją, gausite prieigą prie pasirinktų failų per input elemento failo savybės. Ši savybė grąžina jums sąrašo panašų objektą, kuriame yra visi pasirinkti failai.
Žingsnis 5: Pereiti per failus ir juos rodyti
Dabar laikas iteruoti per kiekvieną pasirinktą failą ir jį parodyti. Galite kurti -elementą, kuris rodytų failo peržiūrą, naudodami funkciją URL.createObjectURL().
Žingsnis 6: Keisti paveikslėlio dydį
Šiuo metu galite lengvai keisti vaizdų dydį. Čia rekomenduojami fiksuoti matmenys, tokių kaip 100x100 pikselių, arba, jei norite daugiau laisvės, naudoti originalų aukštį ir plotį.
Žingsnis 7: Tvarkyti daugybę failų
Sistema turėtų puikiai tvarkyti ne tik vieną failą, bet ir daugybę pasirinkimų. Įgyvendinkite logiką, kad kiekvienas failas būtų tvarkomas atskirai ir rodomas jūsų puslapyje.
Žingsnis 8: Įgyvendinti peržiūrą
Dabar galite rodyti paprastą peržiūrą vartotojams. Vartotojas gali iš karto matyti, kuriuos failus pasirinko, prieš juos įkeliant. Taip sutaupysite ne tik vartotojui, bet ir serverio ištekliams.
Žingsnis 9: Rodyti failo pavadinimą kaip įrankio užuomazgą
Siekdami pagerinti vartotojo patirtį, galite įtraukti failo pavadinimą kaip įrankio užuomazgą į paveikslėlio žymą. Tai ypač naudinga, kai įkeliamos daugybė failų.
Žingsnis 10: Identifikavimo užtikrinimas
Taip pat svarbu užtikrinti, kad vartotojai galėtų identifikuoti įkeltus failus, pridedant pavadinimą po kiekvieno paveikslėlio arba naudojant paveikslėlių alt atributą.
Suvestinė
Šiame vadove išmokei, kaip naudodamas JavaScript pasiekti vietines bylas ir parodyti jas savo internetiniame formulyje. Galite valdyti parodytų paveikslėlių dydį, įterpti užuominas ir pateikti vartotojui draugišką peržiūrą, visa tai be failų įkėlimo į serverį. Šios įgūdžiai būtini norint atlikti bylų įkėlimus ir veiksmus moderniose internetinėse programose.
Daugiausiai užduodami klausimai
Kaip naudoti JavaScript norint pasiekti pasirinktas bylas?Jūs galite naudoti Input elemento files savybę, norėdami pasiekti pasirinktas bylas.
Ar galiu vietiniu būdu redaguoti įkeltus failus?Taip, galite vietiniu būdu redaguoti failus, naudodami, pvz., Canvas elementą miniaturei sukurti.
Kaip parodyti pasirinktų bylų peržiūrą?Sukuriant -elementus ir nustatant src atributą į sukurtą Objekto URL, galite parodyti peržiūrą.
Ar galiu pavadinimą rodyti po paveikslėliu?Taip, galite pridėti pavadinimą po paveikslėliu arba naudoti kaip alt atributą.
Ar galima pasirinkti kelias bylas vienu metu?Ne, norėdami pasirinkti kelias bylas, naudokite multiple atributą Input elemente.
