Bună ziua dragi cititori pe blog-ul webcodius.ru! Una dintre cele mai dificile sarcini pentru coder este o stilizare de elemente de formular ca proiectantul le vede. Mai ales câmpurile implicite, cum ar fi, selectați caseta de validare, sau un fișier complet diferite arată în diferite browsere. Acest articol va explora modul în care stilul câmp pentru a descărca fișierul. că părea la fel în cele mai multe browsere.
În opinia mea, cea mai bună soluție ar fi să-și încheie câmpul de introducere cu tipul de fișier pe eticheta tag-ul. Apoi ascunde fișierul de intrare câmp. și atunci când faceți clic pe elementul de etichetă va fi numit-o fereastră de selectare a fișierului.
HTML - câmpul Embed pentru a încărca fișierul în acest caz, ar fi:
În continuare, ne întrebăm stilurile CSS pentru elementele noastre:
intrare fișier de încărcare [type = "file"] display: none; / * ascunde fișierul de intrare * /
>
/ * Setați butonul de selectare a fișierului de stil * /
.fișier-încărcare Poziția: relativă;
overflow: ascuns;
lățime: 250px;
înălțime: 40px;
fundal: # 4169E1;
border-radius: 10px;
Culoare: #fff;
text-align: center;
>
.file-încărcare: hover fundal: # 1E90FF;
>
/ * Etichetă Stretch întreaga regiune .file încărcați bloc * /
.afișare etichetă fișier de încărcare: bloc;
Poziția: absolută;
top: 0;
stânga: 0;
lățime: 100%;
înălțime: 100%;
cursor: pointer;
>
/ * Style de text pe butonul * /
.fișier de încărcare-etalon line-height: 40px;
font-weight: bold;
>
Cele mai multe dintre regulile CSS pentru clasa .file-încărcare pot fi modificate pentru a se potrivi nevoilor dumneavoastră (cum ar fi fundal, border-radius, culoare, latime si inaltime), deoarece acestea sunt, în principal responsabile pentru apariția butonului de selectare a fișierului.
Ca rezultat, în fereastra browser-ului, vom vedea un buton de selectare a fișierului stilizat, făcând clic pe o fereastră de selectare a fișierului apare:
Pentru a începe, adăugați un element suplimentar cod html unui element div pentru a afișa numele fișierului descărcat, și adăugați un handler la eveniment onchange:
Funcția getFilename () file var = document.getElementById ( 'încărcat-file') valoare .;
file = file.replace (/ \\ / g, «/»).split („/').pop ();
. Document.getElementById ( 'file-name') innerHTML = 'File name:' + fișier;
>
Rezultatul unui astfel de fișier de intrare câmp opțiune: