Recent am întâlnit o sarcină interesantă: în pagină trebuie să plasez un formular de utilizator, în care erau mai multe câmpuri pentru introducerea datelor și un câmp pentru selectarea unui fișier. În plus, butonul de selecție a fișierelor se face exact ca un buton frumos, și nu componenta de intrare standard [fișier]. Și trimiterea acestui formular, în conformitate cu sarcina tehnică, trebuie efectuată imediat după selectarea fișierului. În final, ar trebui să obțineți un formular de utilizator similar:
Aici puteți distinge două sarcini separate. Prima este să trimiteți formularul imediat după selectarea fișierului. Al doilea este de a proiecta componenta de selectare a fișierului în funcție de design sub forma unui buton nestandard.
Forma pentru care implementăm toate sarcinile descrise are următorul cod sursă:
și la început arată astfel:
Trimiteți formulare după selectarea unui fișier în intrare [fișier]
O activitate similară a fost luată în considerare în articolul despre reluarea și actualizarea paginii cu o selecție în selectare. De asemenea, ați folosit componenta de formular pentru a trimite formularul utilizând un script.
Puteți trimite formularul utilizând codul jQuery:
Acest apel trebuie să fie legat de evenimentul de modificare a componentei de selectare a fișierelor [type = file]. Drept rezultat, codul jQuery pentru rezolvarea formularului nostru ar trebui să fie următorul:
Proiectare proprie de intrare [fișier] folosind CSS
Complexitatea acestei sarcini constă în lipsa standardelor pentru proiectarea componentei. În diferite browsere, acesta este afișat diferit. Iar stilurile CSS care definesc aspectul ei nu sunt suficiente pentru ao formaliza.
Cea mai ușoară modalitate de a rezolva această problemă va fi ascunderea componentei în sine și apelarea acesteia făcând clic pe un alt element. Aceasta ridică problema legării unui clic pe un "buton personalizat" la un eveniment standard de selecție a fișierelor.
O opțiune ar putea fi utilizarea jQuery din nou. Dar, în opinia mea, dacă există posibilitatea de a face fără scripturi suplimentare și folosiți numai etichete HTML, atunci merită să faceți fără scripturi. Și aici eticheta HTML vine în ajutorul nostru. În articolul "Comutarea butoanelor radio și caseta de selectare făcând clic pe o semnătură în HTML", cererea sa a fost deja descrisă.
Aici, în mod similar, eticheta componentei de selectare a fișierelor este încadrată de o etichetă de etichetă. În etichetă, adăugăm și textul "Încarcă fișierul"
Acum rămâne doar să atribuiți stiluri designului tagurilor existente. Componenta de selectare a fișierelor este ascunsă. Eticheta de etichetă, dați aspectul dorit:
Prin urmare, colectând împreună scenariile și stilurile dezvoltate, obținem o formă frumoasă, unde fișierul este selectat făcând clic pe butonul frumos și după selectarea fișierului, formularul este trimis: