Com habilitar la càrrega d'arxius d'arrossegar i deixar anar a WordPress
Fer clic en un botó, navegar per carpetes, seleccionar fitxers: el procés de càrrega tradicional funciona, però és maldestre. Arrossegar i deixar anar és el que els usuaris esperen el 2024. Volen agafar fitxers del seu escriptori i deixar-los anar directament al formulari.
En aquesta guia, aprendràs com habilitar la càrrega d'arxius d'arrossegar i deixar anar als formularis de WordPress per a una experiència d'usuari moderna i intuïtiva.
Per què és important arrossegar i deixar anar
Càrregues més ràpides
- No es pot navegar pels diàlegs de fitxers
- Selecciona i deixa anar en un sol moviment
- Puja diversos fitxers a l'instant
Millor experiència en l'usuari
- Intuïtiu: els usuaris entenen la funció d'arrossegar i deixar anar
- Se sent modern i polit
- Redueix la fricció en la finalització del formulari
Taxes de finalització més altes
- Càrregues més fàcils signifiquen menys formularis abandonats
- És més probable que els usuaris adjuntin fitxers quan és senzill
- L'aspecte professional genera confiança
mòbil amable
- Torna sense problemes al selector de fitxers estàndard al mòbil
- Els dispositius tàctils obtenen selecció de fitxers nativa
- Sense funcionalitat trencada
Com funciona l'arrossegar i deixar anar
L'experiència de l'usuari
- L'usuari veu una zona de desplegament al formulari.
- Arrosseguen fitxers des de l'escriptori/carpeta
- La zona de desplegament es ressalta quan els fitxers hi passen el cursor per sobre.
- Es descarten els fitxers i comença la càrrega
- La vista prèvia/confirmació mostra l'èxit de la pujada
Retroalimentació visual
Un bon mètode d'arrossegar i deixar anar proporciona pistes visuals:
- Estat per defecte: Zona de llançament neta amb instruccions
- Arrossega per sobre: Zona destacada, la vora canvia de color
- Tirar: Els fitxers apareixen a l'àrea de previsualització
- Càrrega: Indicador de progrés
- Complet: Confirmació d'èxit
Disseny de la zona de llançament
Elements típics de la zona de llançament:
┌───────────────────────────────────────┐ │ │ │ 📁 Arrossegueu els fitxers aquí o │ │ feu clic per navegar │ │ │ │ S'accepta: PDF, JPG, PNG │ │ Mida màxima: 10 MB │ │ │ └──────────────────────────────────────┘
Configuració de les càrregues d'arrossegar i deixar anar
A continuació s'explica com habilitar la funció d'arrossegar i deixar anar amb Creador de formularis automàtic:
Pas 1: Instal·leu el Creador de formularis automàtic
- Anar a Complements → Afegeix-ne de nous
- Buscar "FIG"(nom abreujat de Creador automàtic de formularis)
- Cerca "AFB – Creador automàtic de formularis – Creador de formularis d'arrossegar i deixar anar"
- feu clic install Now, A continuació, Activate
Pas 2: Afegiu un camp de càrrega de fitxers
- Crea o edita el teu formulari
- Arrossegueu el Carrega camp al vostre formulari
- Feu clic per obrir la configuració del camp
Pas 3: Arrossegar i deixar anar està integrat
Bones notícies: El camp de càrrega de fitxers del Creador de formularis automàtic inclou la funció d'arrossegar i deixar anar per defecte. No cal cap configuració especial.
La zona de càrrega automàticament:
- Accepta fitxers arrossegats
- Aspectes destacats en arrossegar per sobre
- Mostra les previsualitzacions dels fitxers després de deixar-los anar
- Torna a la funció de navegació per clic en dispositius mòbils
Pas 4: Personalitza el camp de càrrega
Configureu els paràmetres del camp de càrrega:
Tipus de fitxer permesos
- Seleccioneu quines categories de fitxers voleu acceptar
- Imatges, documents, fulls de càlcul, etc.
Mida màxima del fitxer
- Estableix un límit de mida per fitxer
- Evita les càrregues de mida excessiva
Múltiples arxius
- Habilita l'acceptació de diversos fitxers abandonats
- Estableix límits mínims/màxims
Etiquetes personalitzades
- Etiqueta del camp: “Puja documents”
- Text d'ajuda: "Arrossegueu els fitxers aquí o feu clic per navegar"
Pas 5: Apliqueu estil a la zona de desplegament (opcional)
Feu servir l'estil de formulari per personalitzar l'aparença:
- Estil i color de la vora
- Color de fons
- Icona o il·lustració
- Estats actius/de pas per sobre del cursor
Millors pràctiques de la zona de desembarcament
1. Feu-ho visible
La zona de caiguda hauria de ser evident:
- Vora clara (les vores discontínues són tradicionals)
- Mida suficient (no petita)
- Icona que indica la càrrega de fitxers (carpeta, núvol, fletxa)
2. Inclou instruccions clares
Digues als usuaris què han de fer:
- "Arrossega els fitxers aquí"
- "o feu clic per navegar"
- Mostra els tipus de fitxer acceptats
3. Proporcioneu comentaris visuals
Els usuaris han de saber que el sistema respon:
- Canvi de color en passar el cursor per sobre
- Ressaltat de la vora en arrossegar-la per sobre
- Missatge "Alliberament per pujar"
4. Mostra el progrés de la càrrega
Per a fitxers més grans:
- Barra de progrés durant la càrrega
- Percentatge completat
- Nom del fitxer que s'està carregant
5. Confirma l'èxit
Un cop finalitzada la càrrega:
- Mostra el nom/miniatura del fitxer
- Marca de verificació o indicador d'èxit
- Opció per eliminar i tornar-ho a intentar
6. Gestioneu els errors amb gràcia
Quan alguna cosa va malament:
- Esborra el missatge d'error ("Fitxer massa gran")
- Ressalteu el fitxer problemàtic
- Permetre un reintent
Arrossegar i deixar anar vs. Fer clic per navegar
| Aspecte | Drag and Drop | Feu clic per navegar |
|---|---|---|
| Accelerar | Més ràpid per a fitxers preparats | Requereix navegació |
| Diversos fitxers | Excel·lent: deixa anar un munt | Cal fer Ctrl+clic |
| mòbil | Torna a fer clic | Experiència nativa |
| Descobriment | Necessita pistes clares de la interfície d'usuari | Botó familiar |
| Expectativa de l'usuari | Estàndard modern | Alternativa tradicional |
Millor enfocament: Compatible amb tots dos. Arrossega i deixa anar per a usuaris avançats, fes clic per cercar tothom.
Patrons comuns de la zona de desembarcament
Patró 1: Zona de llançament completa
Àrea gran i destacada dedicada a la diposició d'arxius:
┌─────────────────────────────────────────┐ │ │ │ ☁️ Puja fitxers │ │ │ │ Arrossega i deixa anar fitxers aquí o │ │ fes clic per navegar │ │ │ │ PDF, DOC, JPG, PNG (màx. 10 MB) │ │ │ └──────────────────────────────────────────┘
Millor per a: Formularis on la càrrega de fitxers és l'acció principal.
Patró 2: Zona de desembarcament compacta
Zona més petita al costat d'altres camps:
Adjunts ┌──────────────────────────┐ │ 📎 Deixa anar fitxers o navega │ └──────────────────────────┘
Millor per a: Càrrega de fitxers com un dels molts camps de formulari.
Patró 3: En línia amb el botó
Zona de llançament combinada amb botó tradicional:
┌────────────────────────────────────────┐ │ Deixa anar els fitxers aquí [Tria fitxers] │ └───────────────────────────────────────┘
Millor per a: Enfocament híbrid, opció de reserva clara.
Patró 4: Zona de previsualització d'imatges
Zona de desplegament amb previsualitzacions en miniatura:
┌────────────────────────────────────────┐ │ [img1] [img2] [img3] [+] │ │ │ │ Deixa anar més imatges aquí │ └───────────────────────────────────────┘
Millor per a: Galeries d'imatges, pujada de fotos.
Consideracions sobre mòbils
Els dispositius tàctils no arrosseguen
Els usuaris de mòbils no poden arrossegar i deixar anar fitxers. El formulari ha de fer servir correctament aquest mètode:
- Toqueu la zona de desplegament i obriu el selector de fitxers.
- Selecció nativa de fotos/fitxers
- Opció de càmera per fer fotos noves
Etiquetes adaptades per a mòbils
Ajusta els missatges per a mòbils:
- Escriptori: "Arrossegueu els fitxers aquí o feu clic per navegar"
- Mòbil: “Toca per seleccionar fitxers” (o només mostrar tots dos)
Prova en dispositius reals
Abans del llançament:
- Prova en iPhone i Android
- Verifica que la selecció de fitxers funciona
- Comproveu l'accés a la càmera si escau
- Assegura't que la càrrega s'ha completat correctament
Millora de la zona de llançament
Animació en arrossegar per sobre
Les animacions subtils milloren l'experiència d'usuari (UX):
- Pols o resplendor de la frontera
- Esvaïment del color de fons
- Rebot o escala de la icona
Sigues subtil: no et distraguis de l'acció.
Icones de tipus de fitxer
Mostra les icones rellevants:
- 📄 per a documents
- 🖼️ per a imatges
- 📊 per a fulls de càlcul
- 🎥 per a vídeos
Progrés de la pujada
Per obtenir millors comentaris durant la càrrega:
- Barra de progrés per fitxer
- Progrés general per a diversos fitxers
- Opció de cancel·lació per a càrregues llargues
Previsualitzacions de miniatures
Per a la càrrega d'imatges:
- Mostra la miniatura després de deixar-la anar
- Feu clic per veure a mida completa
- Botó X per eliminar
Resolució de problemes d'arrossegar i deixar anar
Els fitxers no es perdran
Comproveu:
- JavaScript està habilitat al navegador
- Cap error de JavaScript bloqueja la funcionalitat
- Tipus de fitxer permès
- El navegador admet arrossegar i deixar anar (els navegadors moderns sí)
La zona de desembarcament no destaca
Causes possibles:
- El CSS no carrega correctament
- Error de JavaScript
- Conflicte de complements
Els fitxers es carreguen però no es mostren
Comproveu:
- Funció de previsualització activada
- Tipus de fitxer compatible amb la vista prèvia
- La càrrega s'ha completat realment
El sistema de reserva per a mòbils no funciona
Verificar:
- El controlador de clics/tocs està actiu
- Existeix una entrada de fitxer oculta
- Permisos del navegador mòbil per a l'accés a fitxers
Càrregues lentes
Causes:
- Fitxers de grans mides
- Connexió a Internet lenta
- Limitacions del servidor
Solucions:
- Afegir indicadors de progrés
- Establir límits de mida de fitxer raonables
- Considereu les càrregues fragmentades per a fitxers molt grans
Suport del navegador
La càrrega de fitxers amb la funció d'arrossegar i deixar anar és compatible amb tots els navegadors moderns:
| browser | Suport |
|---|---|
| Chrome | ✅ Suport complet |
| Firefox | ✅ Suport complet |
| Safari | ✅ Suport complet |
| Vora | ✅ Suport complet |
| Òpera | ✅ Suport complet |
| IE 11 | ⚠️ Suport bàsic |
| navegadors mòbils | ✅ Feu clic a la funció alternativa |
Si necessiteu compatibilitat amb navegadors molt antics, assegureu-vos que la funció alternativa de navegació per clic funcioni.
Consideracions d'accessibilitat
Suport de teclat
No tothom fa servir un ratolí:
- La zona de desplegament ha de ser enfocable (tabindex)
- Intro/Espai hauria d'activar el diàleg de fitxer
- Els estats de focus han de ser visibles
Lectors de pantalla
- Etiquetes clares per a l'àrea de càrrega
- Anuncia el progrés de la pujada
- Confirma les càrregues correctes
No confieu només en l'arrossegament
Proporcioneu sempre una alternativa de clic. Arrossegar i deixar anar és una millora, no l'única opció.
Casos d'ús per a arrossegar i deixar anar
Presentació de documents
Els usuaris arrosseguen contractes, informes o sol·licituds directament des de les seves carpetes.
Galeries d'imatges
Deixa anar diverses fotos alhora per a participacions en concursos o presentacions de portafolis.
Tickets de suport
Arrossegueu captures de pantalla o registres d'errors directament al formulari de tiquets.
Sol·licituds de treball
Deixa anar el currículum, la carta de presentació i els exemples de portafoli en una sola acció.
Portals de clients
Els clients arrosseguen fitxers de projecte, recursos o documents de comentaris.
Preguntes freqüents
Funciona arrossegar i deixar anar en tots els navegadors?
Sí, tots els navegadors moderns ho admeten. Els navegadors molt antics (IE10 i anteriors) poden necessitar la funció alternativa de clics.
Què passa als dispositius mòbils?
Els dispositius mòbils no poden arrossegar fitxers, de manera que si toqueu la zona de solta, s'obre el selector de fitxers natiu. L'experiència continua sent bona.
Els usuaris encara poden fer clic per navegar?
Sí, en fer clic a la zona de desplegament s'obre el quadre de diàleg de fitxer. Tots dos mètodes funcionen.
Funciona amb diversos fitxers?
Absolutament. Els usuaris poden arrossegar diversos fitxers alhora si el camp permet diverses càrregues.
Cal una configuració especial?
Amb el Creador de formularis automàtic, la funció d'arrossegar i deixar anar està integrada al camp de càrrega de fitxers. No cal cap configuració especial.
resum
Habilitació de la càrrega de fitxers amb la funció d'arrossegar i deixar anar:
- Afegeix un camp de càrrega de fitxers – Arrossegar i deixar anar està integrat
- Configura els paràmetres del fitxer – Tipus, mides, límits
- Assegureu-vos que la zona de baixada sigui lliure – Visible, amb instruccions
- Proporciona comentaris visuals – Ressaltar en arrossegar, mostrar el progrés
- Suport a la funció de clics alternatius – No tothom arrossega
- Prova al mòbil – Verifica que funciona la funció de tocar per navegar
- Tingueu en compte l'accessibilitat – Compatibilitat amb el teclat i el lector de pantalla
Conclusió
Arrossegar i deixar anar fitxers a la càrrega ja no és una cosa agradable, sinó que s'espera. Els usuaris estan acostumats a arrossegar fitxers al correu electrònic, a l'emmagatzematge al núvol i a les aplicacions de missatgeria. Els vostres formularis haurien d'oferir la mateixa experiència.
Creador de formularis automàtic inclou la funcionalitat d'arrossegar i deixar anar integrada a cada camp de càrrega de fitxers. No cal configurar res: només cal afegir el camp i els usuaris podran arrossegar els fitxers directament al formulari.
A punt per a la càrrega de fitxers moderna? Descarrega el creador de formularis automàtic i ofereix als teus usuaris l'experiència d'arrossegar i deixar anar que esperen.
