Bemeneti fájl stilizáció
Rengeteg módon megváltoztatni az alapértelmezett tervezési Input File. de sajnos, sokan túl nehézkes és gyakran határokon böngésző kompatibilitás.
Ezért úgy döntöttem, hogy ossza meg a legjobb megoldást.
A fő ötlet, hogy lezárja az igazi Input File a label tag. aztán csak elrejti a valódi Input File. jól, sőt címke lesz a nagyon kattintható terület, amely kattintva lesz egy párbeszédablak jelenik meg, amely kéri, hogy válasszon ki egy fájlt a mi számítógép.
Így elrejti a valódi Input File, tudjuk be a címke egy bizonyos fájl kiválasztó gombot.
Mint látható, minden nagyon egyszerű.
Most térjünk rá a Elképzeléseink megvalósítását.
Mint mindig, most kezdődik a HTML struktúra:
Szükségünk van a szövegben, hogy szeretnénk megjeleníteni egy fájl kiválasztás gombot, tegye a címke span. és akkor biztos, hogy lezárja az egészet a label tag, majd egy másik, és egy div class a fájlfeltöltés.
Ezt követően, írj néhány stílusok
Most, ha megnézzük az eredmények, azt látjuk, hogy valójában minden fut, a gomb más formában, ugyanakkor azt könnyen ki tudja választani a fájlt a számítógépen.
Csak van egy probléma, ha kiválaszt egy fájlt, akkor nem jelenik meg vizuálisan. Ami viszont nem tud egy látogató egy kábulat.
Elvégre, ha kiválaszt egy fájlt a szabványos bemeneti fájl. valami közeli bemenettel, megjeleníti az elérési utat a kiválasztott fájlt, de mivel mi egy igazi rejtett Input File. Most nem látok semmit.
Ezért a mi feladatunk az, hogy megbizonyosodjon arról, hogy amikor kiválaszt egy fájlt, az utat, amely tartalmazza a rejtett Input File, szinkronizált valamilyen helyen.
Ezekre a célokra, azt javaslom, hogy a jövő a mi fájlválasztó gombot, és hozzon létre egy másik fajta szöveges mezőre, ahol csak fogja megjeleníteni az utat, hogy a kiválasztott fájl. Természetesen az E mechanizmus, már kell használni a JS.
Nézzük eladni.
Ebből a célból a HTML struktúra, adjunk hozzá egy egyszerű szöveges mezőbe.
Felhívom a figyelmet arra, hogy a mezőnek a fogyatékkal attribútummal. Szüksége volt a látogató maga nem tudott változtatni az értékét ezen a területen.
Mi is hozzá egy kis stílust körünkbe:
Nos ő ad (írtam erre a célra egy kis script jQuery), amely foglalkozik a párhuzamos útját a bemeneti fájl az újonnan hozzáadott mezőbe.
Megjegyzés: valójában a forgatókönyvet megduplázza az adatok nem a teljes elérési utat, de csak a fájl nevét is közvetlenül.
Most már, miután kiválasztotta a fájlt a tárgyi területen váltja fel a neve a kiválasztott fájl. Így a felhasználónak meg kell látni, hogy a fájl mellékelve.
Ez valójában minden, mint mindig, már megbirkózott a kívánt feladatot.
Ami a cross-browser, ez a módszer működik IE9 +, Chrome, Firefox, Mozilla, Opera, Safari.