Hvernig á að virkja drag-and-drop skráarupphleðslur í WordPress

Að smella á hnapp, fletta í gegnum möppur, velja skrár – hefðbundna upphleðsluferlið virkar, en það er klaufalegt. Draga og sleppa er það sem notendur búast við árið 2024. Þeir vilja sækja skrár af skjáborðinu sínu og sleppa þeim beint á eyðublaðið þitt.

Í þessari handbók lærir þú hvernig á að virkja drag-and-drop skráarupphleðslur í WordPress eyðublöðunum þínum fyrir nútímalega og innsæisríka notendaupplifun.

Af hverju skiptir Drag and Drop máli

Hraðari upphleðslur

• Engin leið að fletta í gegnum skráarglugga
• Velja og sleppa í einni hreyfingu
• Hladdu upp mörgum skrám samstundis

Betri notandi reynsla

• Innsæi — notendur skilja draga og sleppa
• Finnst nútímalegt og fágað
• Minnkar núning við útfyllingu eyðublaða

Hærri lokahlutföll

• Auðveldari upphleðslur þýða færri yfirgefin eyðublöð
• Notendur eru líklegri til að hengja skrár við þegar það er einfalt
• Fagleg framkoma byggir upp traust

Mobile Friendly

• Fer aftur í venjulegan skráarval í farsíma
• Snertitæki fá innbyggt skráarval
• Engin biluð virkni

Hvernig Drag and Drop virkar

The User Experience

1. Notandi sér sleppisvæði á eyðublaðinu þínu
2. Þeir draga skrár af skjáborðinu/möppunni sinni
3. Sleppisvæði auðkennist þegar skrár sveima yfir það
4. Skrár eru slepptar og upphleðsla hefst
5. Forskoðun/staðfesting sýnir að upphleðslu tókst

Sjónræn endurgjöf

Gott að draga og sleppa gefur sjónrænar vísbendingar:

• Sjálfgefið ástand: Hreinsa fallsvæðið með leiðbeiningum
• Dragðu yfir: Svæðismerkingar, rammi breytir um lit
• Dropi: Skrár birtast í forskoðunarsvæði
• Hleður upp: Framvinduvísir
• Heill: Staðfesting á árangri

Hönnun dropasvæðis

Dæmigert dropasvæði:

┌──────────────────────────────────────┐ │ │ │ 📁 Dragðu skrár hingað eða │ │ smelltu til að skoða │ │ │ │ Samþykkt: PDF, JPG, PNG │ │ Hámarksstærð: 10MB │ │ │ └────────────────────────────────────────────┘

Uppsetning á drag-and-drop upphleðslum

Svona er hægt að virkja draga og sleppa með Sjálfvirk eyðublaðasmiður:

Skref 1: Setja upp sjálfvirka eyðublaðasmiðinn

1. Fara á Viðbætur → Bæta við nýju
2. Leita að "A.F.B.„(stytt heiti fyrir Auto Form Builder)“
3. Finna "AFB – Sjálfvirkur eyðublaðasmiður – Drag & Drop eyðublaðasmiður"
4. Smellur setja Nú, þá Virkja

Skref 2: Bæta við reit fyrir skráarupphleðslu

1. Búðu til eða breyttu eyðublaðinu þínu
2. draga File Upload reitur á eyðublaðið þitt
3. Smelltu til að opna stillingar fyrir reitinn

Skref 3: Drag and Drop er innbyggt

Góðar fréttir: Skráarupphleðslureiturinn í Auto Form Builder inniheldur sjálfgefið drag-and-drop. Engin sérstök stilling þarf.

Upphleðslusvæðið sjálfkrafa:

• Tekur við dregnum skrám
• Hápunktar við dragover
• Sýnir forskoðun skráa eftir sleppingu
• Fer aftur yfir í smelltu-til-að-vafra í farsímum

Skref 4: Sérsníddu upphleðslureitinn

Stilltu upphleðslureitinn þinn:

Leyfðar skráartegundir

• Veldu hvaða skráarflokka á að samþykkja
• Myndir, skjöl, töflureikna o.s.frv.

Hámarksskráarstærð

• Setja stærðarmörk á hverja skrá
• Kemur í veg fyrir of stórar upphleðslur

Margar skrár

• Virkja að samþykkja margar slepptar skrár
• Setja lágmarks-/hámarksmörk

Sérsniðin merki

• Reitarmerki: „Hlaða inn skjölum“
• Hjálpartexti: „Dragðu skrár hingað eða smelltu til að skoða“

Skref 5: Stílfesta sleppasvæðinu (valfrjálst)

Notaðu eyðublaðsstíl til að sérsníða útlit:

• Rammastíll og litur
• Bakgrunnslitur
• Táknmynd eða myndskreyting
• Sveima/virk stöður

Bestu starfsvenjur fyrir lendingarsvæði

1. Gerðu það sýnilegt

Fallsvæðið ætti að vera augljóst:

• Skýr rammi (strikaðir rammar eru hefðbundnir)
• Nægileg stærð (ekki lítil)
• Táknmynd sem gefur til kynna skráarupphleðslu (mappa, ský, ör)

2. Hafðu skýrar leiðbeiningar með

Segðu notendum hvað þeir eiga að gera:

• „Dragðu skrár hingað“
• „eða smelltu til að skoða“
• Sýna viðurkenndar skráartegundir

3. Veita sjónræna endurgjöf

Notendur þurfa að vita að kerfið bregst við:

• Litabreyting við sveima
• Rammi auðkenndur þegar dregið er yfir
• Skilaboðin „Leyfi til að hlaða upp“

4. Sýna upphleðsluframvindu

Fyrir stærri skrár:

• Framvindustika meðan á upphleðslu stendur
• Hlutfall lokið
• Skráarnafn sem verið er að hlaða upp

5. Staðfesta árangur

Eftir að upphleðslu lýkur:

• Sýna skráarnafn/smámynd
• Gámerki eða árangursvísir
• Möguleiki á að fjarlægja og reyna aftur

6. Meðhöndla villur af þokkabót

Þegar eitthvað fer úrskeiðis:

• Hreinsa villuskilaboð („Skráin er of stór“)
• Merktu vandamálaskrána
• Leyfa endurtekningu

Dragðu og slepptu á móti smelltu til að skoða

Besta aðferðin: Styðjið bæði. Dragðu og slepptu fyrir lengra komna notendur, smelltu til að skoða fyrir alla aðra.

Algeng mynstur fyrir sleppusvæði

Mynstur 1: Fullt fallsvæði

Stórt, áberandi svæði tileinkað skráarsleppingu:

┌─────────────────────────────────────────┐ │ │ │ ☁️ Hlaða inn skrám │ │ │ │ Dragðu og slepptu skrám hingað, eða │ │ smelltu til að skoða │ │ │ │ PDF, DOC, JPG, PNG (hámark 10MB) │ │ │ └─────────────────────────────────────────────────┘

Best fyrir: Eyðublöð þar sem skráarupphleðsla er aðalaðgerðin.

Mynstur 2: Þétt fallsvæði

Minni svæði við hlið annarra akra:

Viðhengi ┌────────────────────────────┐ │ 📎 Slepptu skrám eða skoðaðu │ └────────────────────────────┘

Best fyrir: Skráarupphleðsla sem einn af mörgum eyðublöðum.

Mynstur 3: Saman við hnappinn

Dropasvæði ásamt hefðbundnum hnappi:

┌─────────────────────────────────────────┐ │ Slepptu skrám hér [Veldu skrár] │ └─────────────────────────────────────────────┘

Best fyrir: Blönduð aðferð, skýr varamöguleiki.

Mynstur 4: Forskoðunarsvæði myndar

Sleppisvæði með forskoðun smámynda:

┌────────────────────────────────────────┐ │ [mynd1] [mynd2] [mynd3] [+] │ │ │ │ Slepptu fleiri myndum hér │ └─────────────────────────────────────────────┘

Best fyrir: Myndasöfn, myndaupphleðslur.

Farsímaatriði

Snertitæki draga ekki

Farsímanotendur geta ekki dregið og sleppt skrám. Eyðublaðið þitt verður að falla snyrtilega aftur:

• Bankaðu á sleppisvæðið til að opna skráarvalið
• Val á innfæddri mynd/skrá
• Myndavélavalkostur fyrir að taka nýjar myndir

Farsímavæn merki

Stilla skilaboð fyrir farsíma:

• Skjáborð: „Dragðu skrár hingað eða smelltu til að skoða“
• Farsími: „Ýttu til að velja skrár“ (eða bara sýna báðar)

Prófaðu á raunverulegum tækjum

Fyrir sjósetningu:

• Prófa á iPhone og Android
• Staðfesta að skráarval virki
• Athugaðu aðgang að myndavélum ef við á
• Gakktu úr skugga um að upphleðslu ljúki með góðum árangri

Að efla fallsvæðið

Hreyfimynd við Drag Over

Fínlegar hreyfimyndir bæta notendaupplifun:

• Jaðarpúls eða ljómi
• Bakgrunnslitur dofnar
• Táknhopp eða -stærð

Haltu því látlausu - ekki trufla frá aðgerðinni.

Táknmyndir fyrir skráargerðir

Sýna viðeigandi tákn:

• 📄 fyrir skjöl
• 🖼️ fyrir myndir
• 📊 fyrir töflureikna
• 🎥 fyrir myndbönd

Upphleðsluframvindu

Fyrir betri endurgjöf við upphleðslu:

• Framvindustika fyrir hverja skrá
• Heildarframvinda fyrir margar skrár
• Hætta við valkost fyrir langar upphleðslur

Forskoðun smámynda

Fyrir myndaupphleðslur:

• Sýna smámynd eftir að sleppt er
• Smelltu til að sjá í fullri stærð
• X hnappur til að fjarlægja

Úrræðaleit á Drag and Drop

Skrár detta ekki

Athugaðu:

• JavaScript er virkt í vafranum
• Engar JavaScript villur sem hindra virkni
• Skráartegund er leyfð
• Vafri styður draga og sleppa (nútíma vafrar gera það)

Dropasvæði er ekki auðkennt

Mögulegar orsakir:

• CSS hleðst ekki rétt
• JavaScript villa
• Viðbótarárekstur

Skrár hlaðið upp en birtast ekki

Athugaðu:

• Forskoðunaraðgerð virkjuð
• Skráartegund studd fyrir forskoðun
• Upphleðslu lokið

Farsímavara virkar ekki

Staðfestu:

• Smelltu/smelltu-höndlarinn er virkur
• Falin skráarinntak er til staðar
• Heimildir fyrir aðgang að skrám í farsímavafra

Hægfara upphleðslur

Ástæður:

• Stórar skráarstærðir
• Hæg nettenging
• Takmarkanir á netþjóni

Lausnir:

• Bæta við framvinduvísum
• Settu sanngjarnar skráarstærðarmörk
• Íhugaðu að hlaða upp í stórar skrár í sundur

Stuðningur við vafra

Drag-and-drop skráupphleðslur eru studdar í öllum nútíma vöfrum:

Ef þú þarft að styðja mjög gamla vafra skaltu ganga úr skugga um að smella-til-að-vafra varavalkosturinn virki.

Aðgengissjónarmið

Lyklaborðsstuðningur

Ekki allir nota mús:

• Sleppisvæðið ætti að vera hægt að fókusera (tabindex).
• Enter/Bilás ætti að virkja skráarglugga
• Fókusstöður ættu að vera sýnilegar

Skjálesarar

• Skýr merki fyrir upphleðslusvæðið
• Tilkynna framgang upphleðslu
• Staðfesta að upphleðslur hafi tekist

Treystu ekki bara á drag

Gefðu alltaf upp á valkost við smell. Draga og sleppa er viðbót, ekki eini kosturinn.

Notkunartilvik fyrir draga og sleppa

Skil á skjölum

Notendur draga samninga, skýrslur eða umsóknir beint úr möppunum sínum.

Myndasöfn

Settu inn margar myndir í einu fyrir keppnir eða innsendingar í eignasafn.

Stuðningur Miðar

Dragðu skjámyndir eða villuskrár beint inn í miðaeyðublaðið.

Atvinnuumsóknir

Sendu ferilskrá, kynningarbréf og sýnishorn af eignasafni í einni aðgerð.

Viðskiptavinargáttir

Viðskiptavinir draga verkefnaskrár, eignir eða endurgjöfarskjöl.

Algengar spurningar

Virkar draga og sleppa í öllum vöfrum?

Já, allir nútímavafrar styðja þetta. Mjög gamlir vafrar (IE10 og eldri) gætu þurft smellivalkostinn.

Hvað gerist í snjalltækjum?

Fartæki geta ekki dregið skrár, svo að smella á sleppisvæðið opnar innbyggða skráarvalið. Upplifunin er samt góð.

Geta notendur enn smellt til að skoða síðuna?

Já, með því að smella á sleppisvæðið opnast skráarglugginn. Báðar aðferðirnar virka.

Virkar þetta með margar skrár?

Algjörlega. Notendur geta dregið margar skrár í einu ef reiturinn þinn leyfir margar upphleðslur.

Er þörf á sérstakri stillingu?

Með Auto Form Builder er drag-and-drop innbyggt í skráarupphleðslureitinn. Engin sérstök uppsetning þarf.

Yfirlit

Virkja drag-and-drop skráarupphleðslur:

1. Bæta við reit fyrir skráarupphleðslu – Drag and drop er innbyggt
2. Stilla skráarstillingar – Tegundir, stærðir, takmörk
3. Tryggið að fallsvæðið sé hreint – Sýnilegt, með leiðbeiningum
4. Gefðu sjónræna endurgjöf – Merktu við drag, sýndu framvindu
5. Stuðningur við smelltilboð – Ekki allir draga
6. Prófa í farsíma – Staðfesta að „smelltu til að vafra“ virki
7. Hafðu aðgengi í huga – Stuðningur við lyklaborð og skjálesara

Niðurstaða

Það er ekki lengur þægilegt að hlaða upp skrám með því að draga og sleppa þeim heldur er það væntanlegt. Notendur eru vanir að draga skrár í tölvupósti, skýgeymslu og skilaboðaforritum. Eyðublöðin þín ættu að bjóða upp á sömu upplifun.

Sjálfvirk eyðublaðasmiður Inniheldur drag-and-drop virkni sem er innbyggð í alla reiti fyrir skráarupphleðslu. Engin stilling þarf — bættu bara við reitnum og notendur geta dregið skrár beint inn á eyðublaðið þitt.

Tilbúinn fyrir nútímalegar skráarupphleðslur? Sækja sjálfvirka eyðublaðasmiðinn og veita notendum þínum þá draga-og-sleppa upplifun sem þeir búast við.