Javascript - Ajax fájl feltöltés

ByTech YouTube csatorna
Ebben a tutoriálban bemutatom egy egyszerű Ajaxos fájl feltöltés használatát, amelyhez kapcsolódik egy progress bar, ami mutatja a feltöltés aktuális állapotát.

1.Lépés - Készítsünk el egy egyszerű html formot, amellyel fel szeretnénk tölteni a fájljainkat, illetve a hozzá tartozó progress bart

Nincs is másra szükségünk, mint egy egyszerű html form-ra és progress elementre, amely majd az aktuális állapotot fogja mutatni:
<form action="" method="post" enctype="multipart/form-data" id="upload_form">
    <input name="file" type="file" />
    <input name="submit" type="submit" value="Feltöltés"/>
</form>
<div id="progress">
    <progress class="progress-bar" max="100" value="0"></progress>
</div>

2. Lépés - A form submit eseményének feldolgozása és a progress bar folyamatos frissítése az aktuális állapot kijelzéséért

Figyelnünk kell, hogy a felhasználó mikor küldi el a formot, ezt a folyamatot megállítani, majd egy Ajax kérés segítségével továbbítani a form adatokat és frissíteni a progress elemet:
$(document).ready(function(){
    //A submit folyamat elkapása
    $('#upload_form').on("submit", function(event) {
        //A folyamat megállítása, hogy elvégezhessük az Ajax feltöltést
        event.preventDefault();
        //A form adatainak lekérése
        var form_data = new FormData(this);
        var post_url = $(this).attr("action");

        //A POST küldés végrehajtása Ajax segítségével
        $.ajax({
            url : post_url,
            type: "POST",
            data : form_data,
            contentType: false,
            cache: false,
            processData:false,
            xhr: function(){
                //Feltöltési folyamat és progress bar beállítása
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function(event) {
                        var percent = 0;
                        var position = event.loaded || event.position;
                        var total = event.total;
                        if (event.lengthComputable) {
                            percent = Math.ceil(position / total * 100);
                        }
                        $(".progress-bar").attr("value", + percent);
                    }, true);
                }
                return xhr;
            },
            mimeType:"multipart/form-data"
        }).done(function(res){
            //File mező alaphelyzetbe állítása
            $("#upload_form")[0].reset();
        });
    });
});
  Ennek a rövid kódnak a segítségével már el tudjuk úgy küldeni a fájlokat, hogy a progress bar mutassa az aktuális állapotot.  Ezután még el kell készítenünk a szerver oldali oldali feldolgozást, de azt egy következő részben fogom bemutatni. A teljes forrás letölthető innen. A feltöltés kipróbálásához szükségetek lesz egy lokális webszerverre, én a XAMPP használatát ajánlom.