Az űrlap elküldése (benyújtása) után az elrendezés bemeneti fájljának kiválasztása után
Nemrégiben érdekes feladat volt: az oldalon olyan felhasználói űrlapot kell elhelyeznem, amelyben több adatbeviteli mezõ és egy fájl kiválasztására szolgáló mezõ található. Továbbá, a fájlválasztó gomb ugyanúgy készült, mint egy gyönyörű gomb, és nem a standard bemeneti [fájl] összetevő. Ezt a formanyomtatványt a műszaki feladatnak megfelelően meg kell adni a fájl kiválasztása után. Végül egy hasonló felhasználói űrlapot kell kapnia:
Itt két különálló feladatot különböztethet meg. Az első az űrlap elküldése közvetlenül a fájl kiválasztása után. A második az, hogy a fájlkiválasztás komponenseit a nem szabványos gomb formájában formázza meg.
Az a formanyomtatvány, amelyre az összes leírt feladatot végrehajtjuk, a következő forráskóddal rendelkezik:
és az elején így néz ki:
Küldjön be űrlapokat a fájl kiválasztásakor a [fájl]
A hasonló feladat a cikk újbóli indításával és frissítésével foglalkozó cikkben szerepelt. Ott is használta az űrlap összetevőt, hogy elküldje az űrlapot parancsfájllal.
Az űrlapot jQuery kód segítségével elküldheti:
Ezt a hívást csatolni kell a fájlkiválasztó komponens bemenetének [type = file] változási eseményéhez. Ennek eredményeképpen a jQuery kód formanyomtatványunk megoldásához a következő:
A CSS segítségével a bemenet [fájl] saját tervezése
Ennek a feladatnak a bonyolultsága az alkotóelem kialakításának hiánya. A különböző böngészőkben másképp jeleníti meg. És a megjelenésüket meghatározó CSS-stílusok nem elegendőek ahhoz, hogy formalizálják.
A feladat legegyszerűbb módja az, hogy elrejtse magát a komponensnek, és egy másik elemre kattintva hívja fel. Ez felvetette azt a kérdést, hogyan lehet összekapcsolni egy kattintást egy "egyéni gombra" egy szabványos fájlkiválasztási eseményre.
Az egyik lehetőség a jQuery ismételt használata. Véleményem szerint azonban, ha van lehetőség arra, hogy további szkriptek nélkül, és csak HTML-címkéket használjunk, akkor érdemes szkript nélkül dolgozni. És itt van a HTML címke a segítségünkre. A cikk "A rádiógombok és a jelölőnégyzet átkapcsolása a HTML-ben lévő aláírásra kattintva" alkalmazásának leírását már leírták.
A fentiekhez hasonlóan a fájlkiválasztó összetevő címkéjét egy címkecímkéje keretezi. A címkén a "Fájl feltöltése" szöveget is hozzáadjuk
Most csak stílusok hozzárendelése a meglévő címkék tervezéséhez. A fájlkiválasztó összetevő rejtve van. Címke címke, adja meg a kívánt megjelenést:
Ennek eredményeképpen, a fejlett szkriptek és stílusok összegyűjtésével egy szép formát kapunk, ahol a fájlt a gyönyörű gombra kattintva választjuk ki, és miután a fájlt választottuk, az űrlap elküldésre kerül: