„Input file“ laukelio tikrinimas [jQuery]

Šiandien buvau prisėdęs prie vieno iš savu projektų ir dariau failų į serverį įkėlimo galimyb. ę Šiaip failas yra išsamiai tikrinamas serveryje, kaip ir kiti duomenys, tačiau ir vartotojui reikia bandyt parodyti prieš įkėlimą, kad kažkas blogai. Apie tai mes ir pakalbėsime.

Savo „pasakoje“ vėl naudosiu jQuery galimybes.

Taigi, turime mes tokį html kodą

1
2
3
4

<form method="post" action="panel.php?function=add" enctype="multipart/form-data">
<input type="file" name="file" rel="upload"/>
<input type="submit" value="Send"/>
</form>

Kaip ir nieko ypatingo, tik tais reikia atkreipti dėmesį į parametrą enctype=“multipart/form-data„, kuris yra būtinas failo įkėlimui.

O dabar pats jQuery skriptas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$(document).ready(function ()
{
    //funkcija failu tipui patikrinti
    $('#submit').click(function ()
    {
        //$("input:file[rel=upload]")
        //$("input:file[id=upload]")
        $("input:file").each(function ()
        {
            if ($(this).val() != "")
            {
                var file = $(this).val().split('.').pop().toLowerCase();
                if ($.inArray(file, ['png', 'jpg', 'jpeg', 'doc', 'xls', 'pdf', 'docx']) == -1)
                {
                    alert("Failo tipas nepalaikomas. Prašome naudoti tik png, jpg, jpeg, doc, excel arba pdf");
                }
            }
        });
    });
 
});

Veikimo principai:

• $(„input:file„).each() – cikle perrenka kiekvieną file tipo input laukelį. Jai yra reikalas kažkaip išskirti laukelius, galima naudoti užkomentuotus input:file[id=upload] arba input:file[rel=upload], kur laukelyje nurodomas id arba rel
• 12 eilutėje kintamajam file priskiriama failo galūnė (tipas)
• Toliu funkcijos inArray yra tikrinama, ar yra mūsų failo tipas tarp leistinų. Čia taipogi galima pridėti ir kitus tipus.

Viskas yra miniatiūriškai ir paprasta.

DEMESIO!

Šis būdas neteikia absoliučiai jokios apsaugos, kadangi reikia tik išjungti javascript palaikymą naršyklėje ir ji nebeveiks.
Jis suteikia tik šiokį tokį vartotojo sąsajos pagražinimą ir vizualųjį sistemos išmanumą. Vėliau parašysiu kai išsamiai patikrinti failą.