Kaip įjungti failų įkėlimą vilkimo ir numetimo būdu „WordPress“ sistemoje

Mygtuko paspaudimas, aplankų naršymas, failų pasirinkimas – tradicinis įkėlimo procesas veikia, bet yra nepatogus. Vilkite ir upuść yra tai, ko vartotojai tikisi 2024 m. Jie nori paimti failus iš savo darbalaukio ir perkelti juos tiesiai į jūsų formą.

Šiame vadove sužinosite, kaip įgalinti failų įkėlimą vilkimo būdu „WordPress“ formose, kad naudotojo patirtis būtų moderni ir intuityvi.

Kodėl svarbu vilkti ir mesti

Greitesnis įkėlimas

• Nėra naršymo failų dialoguose
• Pasirinkti ir numesti vienu judesiu
• Įkelkite kelis failus akimirksniu

Geresnė naudotojų patirtis

• Intuityvus – vartotojai supranta vilkimo ir numetimo funkciją
• Jaučiasi modernus ir išpuoselėtas
• Sumažina trintį pildant formą

Didesnis užbaigimo rodiklis

• Paprastesnis įkėlimas reiškia mažiau apleistų formų
• Vartotojai labiau linkę pridėti failus, kai tai paprasta
• Profesionali išvaizda kuria pasitikėjimą

Mobilusis telefonas

• Grakščiai grįžta prie standartinio failų rinkiklio mobiliajame įrenginyje
• Jutikliniai įrenginiai gauna natūralų failų pasirinkimą
• Nėra neveikiančių funkcijų

Kaip veikia vilkimas ir numetimas

Vartotojo patirtis

1. Vartotojas jūsų formoje mato išmetimo zoną
2. Jie tempia failus iš savo darbalaukio / aplanko
3. Numetimo zona paryškėja, kai virš jos užvedamas failas
4. Failai įkeliami ir prasideda įkėlimas
5. Peržiūra / patvirtinimas rodo sėkmingą įkėlimą

Vaizdinis atsiliepimas

Geras vilkimo ir numetimo metodas suteikia vaizdinių užuominų:

• Numatytoji būsena: Išvalyti kritimo zoną su instrukcijomis
• Nuvilkite: Zonos paryškinimai, kraštinės spalva keičiasi
• Lašas: Failai rodomi peržiūros srityje
• Įkeliama: Pažangos rodiklis
• Baigta: Sėkmės patvirtinimas

Kritimo zonos dizainas

Tipiniai kritimo zonos elementai:

┌────────────────────────────────────────┐ │ │ │ 📁 Nuvilkite failus čia arba │ │ spustelėkite, kad naršytumėte │ │ │ │ Priimami: PDF, JPG, PNG │ │ Maks. dydis: 10 MB │ │ │ └───────────────────────────────────────┘

Įkėlimų vilkimo ir numetimo nustatymas

Štai kaip įjungti vilkimą ir numetimą naudojant Automatinis formų kūrimo įrankis:

1 veiksmas: įdiekite automatinę formų kūrimo priemonę

1. Eiti į Įskiepiai → Pridėti naują
2. Ieškoti "A.F.B.„“ (trumpinys, reiškiantis „Auto Form Builder“)
3. Rasti "AFB – automatinių formų kūrimo priemonė – formų kūrimo priemonė su vilkimo ir numetimo funkcija"
4. Spauskite Diegti dabar, Tada aktyvinti

2 veiksmas: pridėkite failo įkėlimo lauką

1. Sukurkite arba redaguokite savo formą
2. Vilkite Įkelti failą laukas jūsų formoje
3. Spustelėkite, kad atidarytumėte lauko nustatymus

3 veiksmas: integruotas vilkimo ir numetimo metodas

Geros naujienos: Automatinio formų kūrimo priemonės failų įkėlimo lauke pagal numatytuosius nustatymus yra vilkimo ir numetimo funkcija. Nereikia jokios specialios konfigūracijos.

Įkėlimo zona automatiškai:

• Priima nuvilktus failus
• Svarbiausi dalykai, susiję su vilkimu
• Rodo failų peržiūras po įkėlimo
• Mobiliuosiuose įrenginiuose grįžtama prie naršymo spustelėjus

4 veiksmas: tinkinkite įkėlimo lauką

Konfigūruokite įkėlimo lauko nustatymus:

Leidžiami failų tipai

• Pasirinkite, kurias failų kategorijas priimti
• Vaizdai, dokumentai, skaičiuoklės ir kt.

Maksimalus failo dydis

• Nustatyti failo dydžio apribojimą
• Apsaugo nuo per didelių įkėlimų

Keli failai

• Įgalinti priimti kelis atmestus failus
• Nustatykite min./max. ribas

Individualizuotos etiketės

• Lauko žymė: „Įkelti dokumentus“
• Pagalbos tekstas: „Nuvilkite failus čia arba spustelėkite, kad naršytumėte“

5 veiksmas: stilizuokite numetimo zoną (neprivaloma)

Norėdami pritaikyti išvaizdą, naudokite formos stilių:

• Rėmelio stilius ir spalva
• Fono spalva
• Piktograma arba iliustracija
• Užvedimo / aktyvios būsenos

Geriausios praktikos pavyzdžiai išmetimo zonoje

1. Padarykite tai matomą

Nukritimo zona turėtų būti akivaizdi:

• Aiški riba (punktyrinės ribos yra tradicinės)
• Pakankamo dydžio (ne mažas)
• Failo įkėlimo piktograma (aplankas, debesis, rodyklė)

2. Pateikite aiškias instrukcijas

Pasakykite vartotojams, ką daryti:

• „Vilkite failus čia“
• „arba spustelėkite, jei norite naršyti“
• Rodyti priimtinus failų tipus

3. Pateikite vaizdinį grįžtamąjį ryšį

Vartotojai turi žinoti, kaip sistema reaguoja:

• Spalvos pasikeitimas užvedus pelės žymeklį
• Kraštinės paryškinimas velkant virš
• Pranešimas „Paleisti įkėlimui“

4. Rodyti įkėlimo eigą

Didesniems failams:

• Įkėlimo eigos juosta
• Užbaigtumo procentas
• Įkeliamo failo pavadinimas

5. Patvirtinkite sėkmę

Baigus įkėlimą:

• Rodyti failo pavadinimą / miniatiūrą
• Varnelė arba sėkmės indikatorius
• Galimybė pašalinti ir bandyti dar kartą

6. Grakščiai elkitės su klaidomis

Kai kas nors negerai:

• Išvalyti klaidos pranešimą („Failas per didelis“)
• Pažymėkite probleminį failą
• Leisti bandyti dar kartą

Vilkimas ir numetimas, palyginti su naršymu spustelėjimu

Geriausias būdas: Palaikomi abu. Patyrusiems vartotojams nuvilkite, o kitiems spustelėkite, kad naršytumėte.

Įprasti kritimo zonos modeliai

1 schema: Pilna kritimo zona

Didelė, gerai matoma vieta, skirta failams mesti:

┌───────────────────────────────────────────┐ │ │ │ ☁️ Įkelti failus │ │ │ │ Nuvilkite failus čia arba │ │ spustelėkite, kad naršytumėte │ │ │ │ PDF, DOC, JPG, PNG (daugiausia 10 MB) │ │ │ └──────────────────────────────────────────┘

Tinkamumas/panaudojimas: Formos, kuriose pagrindinis veiksmas yra failo įkėlimas.

2 schema: Kompaktiška kritimo zona

Mažesnė zona šalia kitų laukų:

Priedai ┌────────────────────────────┐ │ 📎 Įkelkite failus arba naršykite │ └────────────────────────┘

Tinkamumas/panaudojimas: Failo įkėlimas kaip vienas iš daugelio formos laukų.

3 šablonas: Įterptas į vieną su mygtuku

Numetimo zona kartu su tradiciniu mygtuku:

┌─────────────────────────────────────────┐ │ Nuvilkite failus čia [Pasirinkite failus] │ └────────────────────────────────────────┘

Tinkamumas/panaudojimas: Hibridinis metodas, aiški atsarginė alternatyva.

4 schema: Vaizdo peržiūros zona

Numetimo zona su miniatiūrų peržiūromis:

┌──────────────────────────────────────────┐ │ [img1] [img2] [img3] [+] │ │ │ │ Įkelkite daugiau nuotraukų čia │ └────────────────────────────────────────┘

Tinkamumas/panaudojimas: Nuotraukų galerijos, įkėlimai.

Mobiliųjų įrenginių aspektai

Jutikliniai įrenginiai nevelka

Mobiliųjų įrenginių naudotojai negali vilkti failų. Jūsų forma turi būti tvarkingai grąžinama į pradinę vietą:

• Palieskite išmetimo zoną, kad atidarytumėte failų rinkiklį
• Gimtoji nuotraukų / failų atranka
• Kameros parinktis naujoms nuotraukoms fotografuoti

Mobiliesiems įrenginiams pritaikytos etiketės

Koreguokite pranešimus mobiliesiems:

• Darbalaukis: „Nuvilkite failus čia arba spustelėkite, kad naršytumėte“
• Mobilusis: „Palieskite, kad pasirinktumėte failus“ (arba tiesiog rodykite abu)

Bandymas tikruose įrenginiuose

Prieš paleidimą:

• Testavimas „iPhone“ ir „Android“ įrenginiuose
• Patikrinkite, ar failų pasirinkimas veikia
• Patikrinkite prieigą prie kameros, jei taikoma
• Įsitikinkite, kad įkėlimas sėkmingai baigtas

Drop Zone Patobulinimas

Animacija vilkant

Subtilios animacijos pagerina naudotojo patirtį:

• Ribinis pulsas arba švytėjimas
• Fono spalvos išblukimas
• Piktogramos atšokimas arba mastelio keitimas

Būkite subtilūs – neblaškykite dėmesio nuo veiksmo.

Failo tipo piktogramos

Rodyti atitinkamas piktogramas:

• 📄 dokumentams
• 🖼️ nuotraukoms
• 📊 skaičiuoklėms
• 🎥 vaizdo įrašams

Įkėlimo eiga

Norėdami gauti geresnių atsiliepimų įkėlimo metu:

• Failo eigos juosta
• Bendra kelių failų eiga
• Ilgų įkėlimų atšaukimo parinktis

Miniatiūrų peržiūros

Vaizdų įkėlimui:

• Rodyti miniatiūrą numetus
• Spustelėkite, kad pamatytumėte visą dydį
• X mygtukas, skirtas pašalinti

Trikčių šalinimas vilkant ir numetant

Failai neiškris

Tikrinti:

• Naršyklėje įjungtas „JavaScript“
• Nėra JavaScript klaidų, blokuojančių funkcionalumą
• Failo tipas leidžiamas
• Naršyklė palaiko vilkimą ir numetimą (šiuolaikinės naršyklės tai daro).

Numetimo zona nėra paryškinta

Galimos priežastys:

• CSS neįkeliamas tinkamai
• JavaScript klaida
• Įskiepių konfliktas

Failai įkeliami, bet nerodomi

Tikrinti:

• Peržiūros funkcija įjungta
• Peržiūrai palaikomas failo tipas
• Įkėlimas iš tikrųjų baigtas

Mobilusis atsarginis serveris neveikia

Patvirtinti:

• Paspaudimų / bakstelėjimų tvarkyklė aktyvi
• Yra paslėpta failo įvestis
• Mobiliosios naršyklės leidimai pasiekti failus

Lėtas įkėlimas

Priežastys:

• Dideli failų dydžiai
• Lėtas interneto ryšys
• Serverio apribojimai

Sprendimai:

• Pridėti progreso indikatorius
• Nustatykite pagrįstus failų dydžio apribojimus
• Labai didelių failų įkėlimą svarstykite dalimis

Naršyklės palaikymas

Failų įkėlimas vilkimo būdu palaikomas visose šiuolaikinėse naršyklėse:

Jei reikia palaikyti labai senas naršykles, įsitikinkite, kad veikia atsarginis naršymo spustelėjus būdas.

Prieinamumo svarstymai

Klaviatūros palaikymas

Ne visi naudoja pelę:

• Įmetimo zona turėtų būti fokusuojama (tabindex)
• „Enter“ / tarpo klavišas turėtų suaktyvinti failo dialogą
• Fokusavimo būsenos turėtų būti matomos

Ekrano skaitytuvai

• Išvalyti įkėlimo srities žymes
• Paskelbti įkėlimo eigą
• Patvirtinkite sėkmingus įkėlimus

Nepasikliaukite vien tik tempimu

Visada pateikite spustelėjimo alternatyvą. Vilkimas ir numetimas yra patobulinimas, bet ne vienintelė parinktis.

Naudojimo atvejai vilkimui ir numetimui

Dokumentų pateikimas

Vartotojai sutartis, ataskaitas ar programas nuvelka tiesiai iš savo aplankų.

Vaizdų galerijos

Įtraukite kelias nuotraukas vienu metu, jei norite pateikti konkursui arba portfolio.

Paramos bilietus

Nuvilkite ekrano kopijas arba klaidų žurnalus tiesiai į bilieto formą.

Darbo paraiškos

Pateikite gyvenimo aprašymą, motyvacinį laišką ir portfolio pavyzdžius vienu veiksmu.

Klientų portalai

Klientai tempia projekto failus, išteklius arba atsiliepimų dokumentus.

Dažnai užduodami klausimai

Ar „vilk ir numesk“ veikia visose naršyklėse?

Taip, visos modernios naršyklės tai palaiko. Labai senose naršyklėse (IE10 ir senesnėse) gali reikėti atsarginio spustelėjimo.

Kas vyksta mobiliuosiuose įrenginiuose?

Mobilieji įrenginiai negali vilkti failų, todėl palietus nuvilkimo zoną atidaromas vietinis failų rinkiklis. Patirtis vis dar gera.

Ar vartotojai vis dar gali spustelėti, kad naršytų?

Taip, spustelėjus išmetimo zoną atidaromas failo dialogo langas. Abu metodai veikia.

Ar veikia su keliais failais?

Žinoma. Vartotojai gali vienu metu vilkti kelis failus, jei jūsų laukas leidžia kelis įkėlimus.

Ar reikalinga speciali konfigūracija?

Naudojant „Auto Form Builder“, failų įkėlimo lauke integruota vilkimo ir numetimo funkcija. Nereikia jokios specialios sąrankos.

Santrauka

Įgalinti failų įkėlimą vilkimo ir numetimo būdu:

1. Pridėti failo įkėlimo lauką – Įdiegta vilkimo ir numetimo funkcija
2. Konfigūruoti failo nustatymus – Tipai, dydžiai, ribos
3. Užtikrinkite laisvą kritimo zoną – Matomas, su instrukcijomis
4. Pateikite vaizdinį atsiliepimą – Paryškinkite vilkdami, rodykite progresą
5. Palaikymo paspaudimų atsarginis variantas – Ne visi tempia
6. Testavimas mobiliajame telefone – Patikrinkite, ar veikia naršymas paliečiant
7. Apsvarstykite prieinamumą – Klaviatūros ir ekrano skaitytuvo palaikymas

Išvada

Failų įkėlimas vilkimo būdu nebėra tik patogumas – jis įprastas. Vartotojai įpratę vilkti failus el. pašte, debesies saugykloje ir pranešimų programose. Jūsų formos turėtų pasiūlyti tokią pačią patirtį.

Automatinis formų kūrimo įrankis apima vilkimo ir numetimo funkciją, integruotą į kiekvieną failų įkėlimo lauką. Nereikia jokios konfigūracijos – tiesiog pridėkite lauką, ir vartotojai galės nuvilkti failus tiesiai į jūsų formą.

Pasiruošę šiuolaikiniam failų įkėlimui? Atsisiųskite automatinį formų kūrimo įrankį ir suteikite savo vartotojams tokią vilkimo ir numetimo patirtį, kokios jie tikisi.