Kuidas lubada lohistamise teel failide üleslaadimist WordPressis

Nupule klõpsamine, kaustades navigeerimine, failide valimine – traditsiooniline üleslaadimisprotsess toimib, aga on kohmakas. Lohista on see, mida kasutajad 2024. aastal ootavad. Nad tahavad oma töölaualt faile haarata ja need otse teie vormile asetada.

Selles juhendis saate teada, kuidas lubada oma WordPressi vormides lohistamise teel failide üleslaadimist, et pakkuda kaasaegset ja intuitiivset kasutuskogemust.

Miks lohistamine on oluline

Kiiremad üleslaadimised

• Failide dialoogiboksides navigeerimine pole võimalik
• Vali ja aseta ühe liigutusega maha
• Laadige kohe üles mitu faili

Parem kasutuskogemus

• Intuitiivne – kasutajad mõistavad lohistamist
• Tundub moodne ja viimistletud
• Vähendab hõõrdumist vormi täitmisel

Kõrgemad lõpetamise määrad

• Lihtsam üleslaadimine tähendab vähem hüljatud vorme
• Kasutajad lisavad faile tõenäolisemalt siis, kui see on lihtne
• Professionaalne välimus loob usaldust

Mobiilne sõbralik

• Tagasi mobiilseadmetes sujuvalt tavapärase failivalija juurde
• Puutetundlikud seadmed saavad natiivse failivaliku
• Puuduvad funktsioonid

Kuidas lohistamine toimib

Kasutaja kogemus

1. Kasutaja näeb teie vormil tilkumisala
2. Nad lohistavad faile oma töölaualt/kaustast
3. Kukutamise ala esiletõstetakse, kui failid selle kohal hõljuvad
4. Failid laaditakse maha ja üleslaadimine algab
5. Eelvaade/kinnitus näitab üleslaadimise edukust

Visuaalne tagasiside

Hea lohistamine annab visuaalseid vihjeid:

• Vaikimisi olek: Tühjendage kukutamisala koos juhistega
• Lohistage üle: Tsooni esiletõstmised, äärise värv muutub
• Tilk: Failid kuvatakse eelvaatealal
• Üleslaadimine: Edenemisnäidik
• Täielik: Edu kinnitus

Kukkumisala disain

Tüüpilised langemistsooni elemendid:

┌────────────────────────────────────────┐ │ │ │ 📁 Lohistage failid siia või │ │ klõpsake sirvimiseks │ │ │ │ Aktsepteeritud: PDF, JPG, PNG │ │ Maksimaalne suurus: 10MB │ │ │ └────────────────────────────────────────┘

Lohistamise teel üleslaadimise seadistamine

Lohistamise lubamine toimub järgmiselt. Automaatne vormide koostaja:

1. samm: installige automaatne vormide koostaja

1. Minna Pluginad → Lisa uus
2. Otsima "A.F.B.” (automaatse vormi koostaja lühinimi)
3. Leia "AFB – Auto Form Builder – Lohista ja aseta vormide looja"
4. Click Installi kohe, Siis Activate

2. samm: lisage faili üleslaadimise väli

1. Loo või muuda oma vormi
2. lohista File Upload väli oma vormile
3. Klõpsake väljaseadete avamiseks

3. samm: lohistamine on sisse ehitatud

Head uudised: Automaatse vormi koostaja failide üleslaadimise väli sisaldab vaikimisi lohistamise funktsiooni. Spetsiaalset konfiguratsiooni pole vaja.

Üleslaadimistsoon automaatselt:

• Aktsepteerib lohistatud faile
• Lohista üle
• Näitab failide eelvaateid pärast mahapanekut
• Mobiilseadmetes naaseb klõpsamise ja sirvimise juurde

4. samm: kohanda üleslaadimisvälja

Üleslaadimisvälja seadete konfigureerimine:

Lubatud failitüübid

• Valige, milliseid failikategooriaid aktsepteerida
• Pildid, dokumendid, arvutustabelid jne.

Maksimaalne faili suurus

• Faili suuruse piirangu määramine
• Hoiab ära üleliigse üleslaadimise

Mitu faili

• Luba mitme mahajäetud faili vastuvõtmine
• Määrake min/max piirid

Kohandatud sildid

• Välja silt: „Laadi dokumendid üles”
• Abitekst: „Lohistage failid siia või klõpsake sirvimiseks”

5. samm: kujundage langetamisala (valikuline)

Välimuse kohandamiseks kasutage vormi kujundamist:

• Äärise stiil ja värv
• Tausta värv
• Ikoon või illustratsioon
• Hõljumise/aktiivsed olekud

Drop Zone'i parimad tavad

1. Tee see nähtavaks

Kukkumisala peaks olema ilmne:

• Selge ääris (katkendlikud äärised on traditsioonilised)
• Piisava suurusega (mitte tilluke)
• Faili üleslaadimist näitav ikoon (kaust, pilv, nool)

2. Lisage selged juhised

Ütle kasutajatele, mida teha:

• "Lohistage failid siia"
• „või klõpsa sirvimiseks”
• Kuva aktsepteeritud failitüübid

3. Andke visuaalset tagasisidet

Kasutajad peavad teadma, kuidas süsteem reageerib:

• Värvi muutus hõljudes
• Äärise esiletõstmine lohistamisel
• Sõnum „Vabasta üleslaadimiseks”

4. Näita üleslaadimise edenemist

Suuremate failide puhul:

• Edenemisriba üleslaadimise ajal
• Valmisoleku protsent
• Üleslaaditava faili nimi

5. Edu kinnitamine

Pärast üleslaadimise lõppu:

• Näita faili nime/pisipilti
• Linnuke või eduindikaator
• Võimalus eemaldada ja uuesti proovida

6. Käsitsege vigu graatsiliselt

Kui midagi läheb valesti:

• Tühjenda veateade („Fail on liiga suur”)
• Tõsta esile probleemfail
• Luba uuesti proovida

Lohistamine vs. klõpsamine sirvimiseks

Parim lähenemisviis: Toeta mõlemat. Edasijõudnud kasutajate jaoks lohista ja aseta, teiste nägemiseks klõpsa sirvimiseks.

Levinud langemistsooni mustrid

Muster 1: Täielik langemistsoon

Suur ja silmapaistev ala failide mahapanekuks:

┌───────────────────────────────────────────┐ │ │ │ ☁️ Laadi failid üles │ │ │ │ Lohistage failid siia või │ │ klõpsake sirvimiseks │ │ │ │ PDF, DOC, JPG, PNG (max 10MB) │ │ │ └───────────────────────────────────────────┘

Parim on: Vormid, kus faili üleslaadimine on peamine toiming.

Muster 2: Kompaktne kukkumistsoon

Väiksem tsoon teiste põldude kõrval:

Manused ┌─────────────────────────────┐ │ 📎 Puista failid sisse või sirvi │ └─────────────────────────┘

Parim on: Faili üleslaadimine ühena paljudest vormiväljadest.

Muster 3: Nupuga reas

Kukkumisala koos traditsioonilise nupuga:

┌──────────────────────────────────────────┐ │ Lohista failid siia [Vali failid] │ └─────────────────────────────────────────┘

Parim on: Hübriidlähenemine, selge varuvõimalus.

Muster 4: Pildi eelvaate tsoon

Pisipiltide eelvaadetega tilkumisala:

┌──────────────────────────────────────────┐ │ [img1] [img2] [img3] [+] │ │ │ │ Lisa siia rohkem pilte │ └─────────────────────────────────────────┘

Parim on: Pildigaleriid, fotode üleslaadimine.

Mobiilseadmetega seotud kaalutlused

Puutetundlikud seadmed ei lohista

Mobiilikasutajad ei saa faile lohistada. Teie vorm peab korrektselt tagasi paika panema:

• Failivalija avamiseks puudutage kukutamisala
• Natiivne foto/faili valik
• Kaamera valik uute fotode tegemiseks

Mobiilisõbralikud sildid

Kohanda sõnumside mobiilseadmete jaoks:

• Töölaud: „Lohistage failid siia või klõpsake sirvimiseks”
• Mobiil: „Failide valimiseks puudutage” (või kuvage lihtsalt mõlemad)

Testige päris seadmetes

Enne turuletoomist:

• Testi iPhone'is ja Androidis
• Kontrollige failivaliku toimimist
• Kontrollige kaamera ligipääsu, kui see on olemas
• Veenduge, et üleslaadimine oleks edukalt lõpule viidud

Kukkumisala täiustamine

Animatsioon lohistamisel

Peened animatsioonid parandavad kasutajakogemust:

• Äärepulss või kuma
• Taustavärvi tuhmumine
• Ikoonide põrkamine või skaleerimine

Hoia see peenelt – ära juhi tähelepanu tegevuselt kõrvale.

Failitüübi ikoonid

Kuva asjakohased ikoonid:

• 📄 dokumentide jaoks
• 🖼️ piltide jaoks
• 📊 arvutustabelite jaoks
• 🎥 videote jaoks

Üleslaadimise edenemine

Parema tagasiside saamiseks üleslaadimise ajal:

• Edenemisriba faili kohta
• Mitme faili üldine edenemine
• Pikkade üleslaadimiste tühistamise valik

Pisipiltide eelvaated

Piltide üleslaadimiseks:

• Näita pisipilti pärast kukutamist
• Täissuuruses kuvamiseks klõpsake
• X-nupp eemaldamiseks

Lohistamise tõrkeotsing

Failid ei kao maha

Kontrollima:

• JavaScript on brauseris lubatud
• JavaScripti vead ei blokeeri funktsionaalsust
• Failitüüp on lubatud
• Brauser toetab lohistamist (tänapäevased brauserid toetavad)

Kukkumisala ei tõsta esile

Võimalikud põhjused:

• CSS ei laadi õigesti
• JavaScripti viga
• Pluginate konflikt

Failid laaditakse üles, aga neid ei kuvata

Kontrollima:

• Eelvaate funktsioon on lubatud
• Eelvaate jaoks toetatud failitüüp
• Üleslaadimine on tegelikult lõppenud

Mobiilne varuvõimalus ei tööta

Kinnitage:

• Klõpsu-/puudutuskäitleja on aktiivne
• Peidetud faili sisend on olemas
• Mobiilibrauseri failidele juurdepääsu õigused

Aeglane üleslaadimine

Põhjused:

• Suured failisuurused
• Aeglane internetiühendus
• Serveri piirangud

Lahendused:

• Lisa edenemisnäidikud
• Määrake mõistlikud failisuuruse piirangud
• Väga suurte failide puhul kaalu tükkidena üleslaadimist

Brauseri tugi

Lohistamisfunktsiooniga failide üleslaadimist toetavad kõik tänapäevased brauserid:

Kui teil on vaja toetada väga vanu brausereid, veenduge, et klõpsamisega sirvimiseks varuvõimalus töötaks.

Juurdepääsetavuse kaalutlused

Klaviatuuri tugi

Mitte kõik ei kasuta hiirt:

• Kukutamise ala peaks olema fokuseeritav (tabindex)
• Failidialoogi peaks käivitama sisestus/tühikuklahv
• Fookuse olekud peaksid olema nähtavad

Ekraanilugerid

• Üleslaadimisala sildid tuleb selgelt eemaldada
• Teata üleslaadimise edenemisest
• Edukate üleslaadimiste kinnitamine

Ära toetu ainult lohistamisele

Paku alati klõpsamise alternatiivi. Lohistamine on täiustus, mitte ainus võimalus.

Kasutusjuhud lohistamise jaoks

Dokumendi esitamine

Kasutajad lohistavad lepinguid, aruandeid või rakendusi otse oma kaustadest.

Pildigaleriid

Lisa mitu fotot korraga võistlustöödeks või portfoolio esitamiseks.

Kirjad

Lohistage ekraanipildid või vealogid otse piletivormi.

Tööavaldused

Lisa CV, kaaskirja ja portfoolio näidised ühe toiminguga.

Kliendiportaalid

Kliendid lohistavad projektifaile, varasid või tagasiside dokumente.

Korduma kippuvad küsimused

Kas lohistamine töötab kõigis brauserites?

Jah, kõik tänapäevased brauserid toetavad seda. Väga vanad brauserid (IE10 ja vanemad) võivad vajada klõpsamise varufunktsiooni.

Mis juhtub mobiilseadmetes?

Mobiilseadmed ei saa faile lohistada, seega lohistamisala puudutamine avab loomuliku failivalija. Kogemus on endiselt hea.

Kas kasutajad saavad ikka klõpsata sirvimiseks?

Jah, rippmenüüle klõpsamine avab failidialoogi. Mõlemad meetodid toimivad.

Kas see töötab mitme failiga?

Absoluutselt. Kasutajad saavad korraga mitu faili lohistada, kui teie väli lubab mitut üleslaadimist.

Kas on vaja spetsiaalset konfiguratsiooni?

Automaatse vormi koostajaga on lohistamise funktsioon faili üleslaadimise väljale sisse ehitatud. Spetsiaalset seadistamist pole vaja.

kokkuvõte

Lohistamisfunktsiooniga failide üleslaadimise lubamine:

1. Lisa faili üleslaadimise väli – Lohistamise funktsioon on sisse ehitatud
2. Faili sätete konfigureerimine – Tüübid, suurused, piirangud
3. Veenduge, et kukkumisala oleks vaba – Nähtav, koos juhistega
4. Andke visuaalset tagasisidet – Tõsta lohistamisel esile, näita edenemist
5. Toetage kliki varuvõimalust – Mitte kõik ei lohise
6. Testi mobiilis – Kontrollige, et puutega sirvimine töötab
7. Kaaluge juurdepääsetavust – Klaviatuuri ja ekraanilugeja tugi

Järeldus

Failide üleslaadimine lohistamisega pole enam meeldiv funktsioon – see on ootuspärane. Kasutajad on harjunud faile e-posti, pilvesalvestuse ja sõnumsiderakenduste kaudu lohistama. Teie vormid peaksid pakkuma sama kogemust.

Automaatne vormide koostaja sisaldab lohistamise funktsiooni, mis on sisse ehitatud igasse faili üleslaadimise väljale. Konfigureerimist pole vaja – lisage lihtsalt väli ja kasutajad saavad faile otse teie vormile lohistada.

Kas olete valmis moodsaks failide üleslaadimiseks? Laadige alla automaatne vormide koostaja ja pakkuge oma kasutajatele lohistamise kogemust, mida nad ootavad.