Există de tone de moduri de a schimba implicit fișierul de design de intrare. dar, din păcate, multe dintre ele sunt prea greoaie și de multe ori de compatibilitate cross-browser.
Așa că am decis să împărtășesc cu voi cea mai bună soluție.
Ideea sa principală este de a încheia fișierul de intrare real în tag-ul etichetă. atunci vom ascunde doar fișierul de intrare reală. bine, în fapt, eticheta va fi zona foarte poate da clic, clic pe care o vom avea o casetă de dialog care vă solicită să selectați un fișier de pe calculatorul nostru.
Astfel, ascunderea File reale de intrare, putem transforma eticheta într-un anumit buton de selectare a fișierului.
După cum puteți vedea, totul este foarte simplu.
Acum, să trecem la punerea în aplicare a ideilor noastre.
Ca întotdeauna, începem cu structura HTML:
Avem nevoie de textul pe care dorim să afișeze un buton de selectare a fișierului, pus în intervalul tag-ul. și apoi asigurați-vă că toate înveliți în tag-ul etichetă, apoi alta, și într-un div cu clasa de fișiere-încărcare.
După aceea, a scrie unele stiluri
Acum, dacă ne uităm la rezultatele noastre, vedem că, de fapt, totul se execută, butonul are o formă diferită și, în același timp, putem selecta cu ușurință fișierul pe calculatorul nostru.
Doar există o problemă, dacă selectați un fișier, atunci nu se afișează vizual. Care, la rândul său, se poate pune un vizitator site-ul într-o stupoare.
La urma urmei, dacă selectați un fișier utilizând fișierul standard de intrare. ceva apropiat de această intrare, se va afișa calea către fișierul selectat, dar din moment ce suntem un fișier de intrare reală ascunsă. Acum, noi nu vedem nimic.
Prin urmare, sarcina noastră este să vă asigurați că, atunci când selectați un fișier, calea pe care este conținută într-un fișier de intrare ascunsă, numit într-un loc.
În acest scop, am sugera că de lângă butonul de selectare a fișierului nostru, și de a crea un alt tip de câmp de tip text, în cazul în care vom merge doar pentru a afișa calea către fișierul selectat. Desigur, pentru punerea în aplicare a acestui mecanism, avem nevoie deja de a utiliza JS.
Hai să-l vândă.
În acest scop, structura noastră HTML, adăugați un câmp de text simplu.
Vă atrag atenția că câmpul are atributul dezactivat. El avea nevoie pentru vizitator însuși nu a putut schimba valoarea acestui câmp.
De asemenea, adăugăm un stil de puțin la domeniul nostru:
Ei bine, el JS (am scris în acest scop, un script mic pe jQuery), care se va ocupa cu dublarea calea fișierului de intrare în caseta de text nou adăugat.
Notă: De fapt, script-ul dublează datele nu este calea completă către fișierul, dar numai numele fișierului în sine în mod direct.
Acum am, după selectarea fișierului în câmpul de intrare adăugată va fi înlocuit cu numele fișierului selectat. Astfel, utilizatorul va trebui să vadă că fișierul a fost atașat.
Este de fapt totul, ca întotdeauna, ne-am făcut față cu sarcina necesară.
În ceea ce privește browser, această metodă funcționează în IE9 +, Chrome, Firefox, Mozilla, Opera, Safari.