câmp styling adăuga fișiere - fișier de intrare, proiectarea și dezvoltarea site-ului

câmp styling adăuga fișiere - fișier de intrare, proiectarea și dezvoltarea site-ului

Bună ziua. 🙂

Toate conversie pe care le face cu CSS și stiluri de jQuery. Când studia materialul, veți vedea că puteți obține doar prin CSS, dar atunci nu va afișa nici un fișier este selectat. doar pentru difuzoarele și va folosi jQuery. Când totul este terminat, rezultatul va fi similar cu următorul text:





Mai întâi trebuie să elementele de limbaj HTML. Voi avea codul în propriul formular. Principalul lucru pe care trebuie să înlocuiți caseta de selectare a fișierului pe mele sau ajusta setările lor sub mina principală. Media câmp încărcări de fișiere arată astfel:

Vom avea, de asemenea, formularul de mai jos:

Să aruncăm o privire pic la ce si cum.

  • - în toate să încheie container unitate. condiție obligatorie. Atribuirea clasa fl_upld bloc.
  • - domeniul nostru fișier atașat pentru a încheia eticheta. Aceasta este identitatea și domeniul nostru. Câmpul se atribuie id = „fl_inp“. De asemenea, un punct important. Ei bine, adăuga text - Selectați fișierul. Acest text va fi pe butonul următor.
  • Fișierul nu este selectat
    - bloc, care afișează un text inițial - fișier nu este selectat. După selectarea fișierului, în loc va apărea numele de fișier text. atribuirea unui bloc dat id = „fl_nm“. Privind în perspectivă, voi spune că, dacă nu conectați script-ul pentru a afișa numele fișierului, nu puteți adăuga bloc. Vei avea un buton fără difuzoare.

În continuare, vom adăuga stilurile simple ale butonului nostru. Trebuie doar să adăugați următorul cod la foaia de stil:

vă spun repede ce este responsabil pentru ceea ce.

  • Pentru a instala containerul fl_upld lățime 300px. Dacă acest câmp este în interiorul formei, care va avea o lățime de, în principiu, nu se poate scrie această lățime de linie și nu cere.
  • #fl_inp - ascunde câmpul nostru standard de fișier atașat. Acesta este un important și numai parametrul principal.
  • Pe lângă .fl_upld etichetă - parametrii de scriere. ID-ul, și va fi cheia noastră. Prescrierea tot ce doriți să faceți butonul speciei dorite.
  • .Eticheta fl_upld: Hover - stiluri de buton. Miza pluteste peste. Avem doar devine galben.
  • Și, în sfârșit, pentru unitatea de nume de fișier #fl_nm adăuga, de asemenea parametri.

Asta-i toate stilurile, desigur, după cum puteți schimba oricând le doriți și personalizați pentru ei înșiși. Principala opțiune - pentru a ascunde un câmp standard de. #fl_inp

Acum vom trece la ultimul pas, adăugați un script nume de fișier de ieșire atunci când adăugați. Ca script-ul ruleaza pe jQuery. în primul rând trebuie să vă conectați biblioteca. în cazul în care a fost deja făcut pentru a face acest lucru inutile.

Dacă nu știi cum să adăugați script-uri și biblioteci, citiți articolul - Cum și în cazul în care pentru a conecta un script?

Să examinăm un pic scenariu în sine.

  • $ ( „# Fl_inp“) - în al doilea rând indică faptul Haydee domeniul nostru ascuns.
  • $ ( "# Fl_nm") html (nume de fișier) .; - în al patrulea rând indică ultimul bloc Haydee care va fi afișat în locul numelui de fișier text - Fișierul nu este selectat. Facem valoarea de înlocuire.

Asta este, trebuie doar pentru a identifica în mod corect două ID-ul. Dacă schimbați Haydee și clase pe cont propriu, nu te confuz și alege toate lucrurile dreptul de a lucra în mod corespunzător. După ce a făcut totul corect, rezultatul nu va dura mult timp. Dacă te gândești la asta și de a înțelege totul, devine clar că nimic complicat aici.

Asta e tot, vă mulțumesc pentru atenție. 🙂

Dacă ați fost utile pentru munca mea, vă poate sprijini site-ul dvs. :)

Bună ziua dragi prieteni

Ai instalat extensia AdBlock sau altele asemenea. Adaugă site-ul meu pe lista albă, și, astfel, vnesesh contribuie la dezvoltarea acesteia. Instrucțiuni despre cum să dezactivați AdBlock doriți această fereastră