MGdevelop » JavaScript

Uploader plików z wykorzystaniem HTML5

Elektryk — Tue, 21 Jun 2011 17:37:47 +0000

Swego czasu problemem dla twórców stron internetowych było wysyłanie plików bez przeładowywania strony. Mieliśmy do wyboru albo użyć apleta flash albo szpecić swój kod iframami. Czasy na szczęście się zmieniają i powstają nowe technologie które to pozwalają na coraz więcej. Aktualnie nowoczesne przeglądarki udostępniają obiektFile z poziomu kodu JS który w połączeniu z ajaxem pozwala stworzyć uploader plików dorównujący możliwościami tym flashowym lub javowym.

Stawiamy cele

Najpierw postaram się omówić co będę chciał zbudować w tym tutorialu. Moim celem jest napisanie uploadera który będzie w przeglądarkach Chrome i Firefox zastępować tradycyjny HTMLowy formularz. Nasz skrypt bedzie przyjmował pliki metodą drag & drop i wyświetlał ich listę w postaci kontenerów. Po wykryciu, że internauta trzyma pliki nad przeglądarką nastąpi zachęcenie go do upuszczenia ich w odpowiednim miejscu poprzez podmianę napisu. Każdy kontener zaś będzie wyświetlał nazwę wybranego pliku, miniaturkę jeśli wybrany plik jest grafiką lub ewentualnie ikonkę zastępczą, pole tekstowe gdzie można dodać opis oraz przycisk wysyłania. Kontener będzie zawierał także przycisk usuwający dany plik z listy do wysłania oraz pole na wyświetlanie komunikatów. W momencie kliknięcia przycisku wysłania sam przycisk zniknie (aby użytkownik nie wysłał kilka razy tego samego pliku) i pojawi się w razie nie udanego uploadu. Każdorazowa próba wysłania spowoduje wyświetlenie odpowiedniego napisu w polu komunikatów. Jeśli chodzi o przesłane pliki to będą one zapisywane pod ustawionym adresem a opisy do nich będą lądować w pliku tekstowym o nazwie .txt.

Wersja demonstracyjna skryptu (nie zapisuje plików na serwerze)

Gotowiec do pobrania na dole strony.

Kod HTML

Zacznijmy od napisania kodu tradycyjnego formularza:

Ważne jest by objąć tą część kodu w blok z nadaną klasą uploadHTML gdyż później będziemy usuwać stary typ formularz poprzez odwołanie się do tej klasy. Podobny blok tworzymy dla naszego nowoczesnego uploadera:


    //tu dalsza część kodu

Teraz wrzucamy do niego dwa elementy. Pole gdzie użytkownik ma upuścić plik:


    Przenieś tu pliki które chcesz
wysłać na serwer

oraz miejsce na listę plików do wysłania na serwer:


    //tu dalsza część kodu

Do tego diva wstawimy teraz przykładowy element a następnie go schowamy. Będzie to szablon dla skryptu jak mają wyglądać nowe elementy na liście.


    
        Nazwa pliku.jpg
        ×
    
    
        
    
    
        
        
        
        Wyślij plik

W powyższym nie trzeba raczej niczego tłumaczyć po za tym, że div z id startUpload będzie przyciskiem który rozpocznie upload a zaś plik file.png jest naszą domyślną ikonką. Aby szablon był niewidoczny dla użytkownika w arkuszu CSS piszemy:

#uploadFileTemplate{
        display: none;
}

A teraz Javascript

Po pierwsze dołączymy do naszego kodu bibliotekę jQuery ponieważ dla łatwości pisania najlepiej będzie oprzeć nasz skrypt na tym frameworku.

Teraz zdefiniujemy parę zmiennym których użycie będę wyjaśniał później oraz napiszemy instrukcję która zapewni nam, że nasz kod nie wykona się za nim wszystkie elementy strony nie będą załadowane.

var ePage;
var eDropPlace;
var eStartUpload;
var filesToUpload;
var newId;
var idi = 0;

$(document).ready(function(){
    //tu dalsza część kodu
});

Wewnątrz tego kodu umieszczamy teraz instrukcję warunkową która wyświetli nasz uploader w przeglądarkah obsługujących wykorzystywane przez nas technologie:

if (window.File && window.FileReader && window.FileList) {
    $("#uploadHTML").remove();
    $("#uploadJS").show();
    ePage               = document.getElementsByTagName('body').item(0);
    eDropPlace          = document.getElementById("uploader");
    //tu dalsza część kodu
}

Powyższy kod działa w ten sposób, że sprawdzane jest czy przeglądarka obsługuje używane przez nas obiekty File, FileReader oraz FileList. Jeśli tak to usuwamy tradycyjny formularz a wyświetlamy ten nasz. Po tej operacji możemy już pobrać referencje do dwóch ważnych obiektów w naszym kodzie. ePage to cała nasza strona dla której będziemy wykrywali czy użytkownik przeniósł pliki nad okno przeglądarki. eDropPlace natomiast to miejsce gdzie użytkownik ma upuścić pliki. Mogłoby być to to samo miejsce ale w tym tutorialu zrobimy rozróżnienie aby lepiej wytłumaczyć czym to się różni.

Zdarzenia ondragover i ondragleave

Teraz poniżej tego (ale przed nawiasem klamrowym) dodamy obsługę zdarzeń. Po pierwsze obsłużmy przeniesienie plików nad przeglądarkę:

ePage.ondragover=function(f){
    eDropPlace.innerHTML="Upuśc plik na to pole";
    f.dataTransfer.dropEffect="copy";
    f.preventDefault();
    return false
};

ondragover to właśnie zdarzenie polegające na tym, że użytkownik zaznaczył w folderze pliki i za pomocą myszki przeniósł je nad okno przeglądarki. Jeśli takie coś wykryjemy to zmieniamy treść napisu oraz zmieniamy kursor na informujący, że będziemy kopiować pliki (w Chrome np. przy kursorze pojawia się napis Kopiuj). MetodapreventDefault() natomiast zapewni nam, że przeglądarka nie zacznie się dziwnie zachowywać np. nie będzie zaznaczany tekst podczas przesuwania kursora nad oknem.

Podobne operacje wykonujemy dla zdarzenia przeciwnego czyli ondragleave:

ePage.ondragleave=function(f){
    eDropPlace.innerHTML="Przenieś tu pliki które chcesz
wysłać na serwer";
    f.dataTransfer.dropEffect="copy";
    f.preventDefault();
    return false
};

Teraz czas na najważniejszą część kodu która obsłuży upuszczenie plików na okno przeglądarki (zdarzenie ondrop) i doda je do listy.

Zdarzenie ondrop

ePage.ondrop=function(g){
    g.preventDefault();
    files = g.dataTransfer.files;
    eDropPlace.innerHTML ="Przenieś tu pliki które chcesz
wysłać na serwer";

    //tu dalsza część kodu
}

Ponownie skorzystaliśmy z metody preventDefault() gdyż przeglądarki domyślnie po upuszczeniu na nie pliku próbują je wyświetlać lub „ściągnąć”. Musimy temu zapobiec aby mógł się wykonać dalszy kod. Gdy to już mamy zapewnione to możemy skorzystać z instrukcji g.dataTransfer.files która zwróci nam tablicę obiektów poszczególnych plików. G zostało nam podane jako argument funkcji która wykona się w momencie zajścia zdarzenia ondrop. A jako, że internauta nie trzyma już plików to nie zajdzie zdarzenie ondragleave więc w powyższym kodzie obsługujemy przywrócenie napisu.

Teraz możemy już sobie iterować po tej tablicy i wyciągać kolejne obiekty plików do uploadu:

for(var i = 0, f; f = files[i]; i++){
    var reader=new FileReader();

    //tu dalsza część kodu

    reader.readAsDataURL(f);
}

Powyższa pętla przypisuje kolejne obiekty plików do zmiennej f, tworzy nowy obiekt klasy FileReader i wczytuje plik do stworzonego obiektu. I teraz naszym zadaniem jest napisanie funkcji która zostanie wykonana gdy cały plik zostanie wczytany (jest on wczytywany asynchronicznie z powodu opóźnienia jakie może wywołać obciążony dysk twardy). Wykonuje się to za pomocą nietypowej konstrukcji która należy umieścić przed użyciem metody readAsDataURL:

reader.onload = (function(theFile) {
    return function(e) {
        //tu dalsza część kodu
    };
})(f);

Jakkolwiek dziwnie powyższy kod wygląda to nadszedł czas na napisanie funkcji tworzącego nowe elementy na liście. Na początek musimy przyjąć, że każdemu nowemu kontenerowi będziemy nadawać ID wg schematu: file1, file2, file3 itd. Realizuje to poniższy kod:

var newId = "file"+idi; idi++;
$(".uploadList").prepend(""+$("#uploadFileTemplate").html()+"
");

Jak widać stworzyliśmy nowy kontener, nadaliśmy mu id i skopiowaliśmy do niego nasz szablon z diva uploadFileTemplate. Nowy element pojawi się na liście plików na samej górze dzięki metodzie prepend z biblioteki jQuery.

Teraz czas na wypełnienie naszego szablonu i nadaniu zdarzeń dla przycisków:

$("#"+newId+" .header .name").text(theFile.name);

//wrzuca miniatirku zdjęć
if(theFile.type.match(/image.*/))
    $("#"+newId+" .thumb .image").attr("src",e.target.result);

Obiekt theFile w tym momencie przechowuje informacje i naszym pliku. Pobieramy z niego nazwę pliku (theFile.name) i wpisujemy w odpowiednim miejscu. Dalej sprawdzamy czy nasz plik jest obrazkiem za pomocą theFile.type.match(/image.*/). Jeśli tak to odczytujemy nasz plik z zmiennej e.target.result i wpisujemy jako atrybutsrc miniaturki. Plik jest przechowywany w wspomnianej zmiennej w formacie base64. Polecam kliknąć na tak wyświetloną grafikę PPM i wybrać opcję Pokaż obrazek. Zobaczymy wtedy w pasku adresu jak wygląda grafika w takim kodowaniu.

//zapisuje plik do pola tekstowego
$("#"+newId+" input[name=\"file\"]").val(e.target.result.split(",")[1]);

//obsługa usuwania pliku
$("#"+newId+" .delete").click(function(z){
    $("#"+newId).remove();
});

//obsługa wysyłania
$("#"+newId+" #startUpload").click(function(z){
    trySendFile(newId);
});

Wracając do naszego szablonu to teraz znowu musimy odczytać nasz plik i zapisać go do pola tekstowego o nazwie file. Teraz jednak przypiszemy tylko sam kod bez informacji o typie kodowania. Przy użyciu javascriptowej metody split wytniemy zbędny w tym przypadku napis data:image/png;base64,. W dalszej części kodu oskryptowujemy przycisk anulowania wysyłania pliku którego kliknięcie spowoduje usunięcie całego kontenera oraz przycisk wysyłania pliku którego kliknięcie wywoła większą funkcję trySendFile.

I to wszystko jeśli chodzi o obsługę zdarzenia ondrop. Czy czegoś nam brakuje? Tak, definicji funkcji…

trySendFile

function trySendFile(eId){
    $("#"+eId+" #startUpload").hide();

    var fileData = $("#"+eId+" input[name=\"file\"]").val();
    fileData = fileData.replace(/\+/gi, '-');
    fileData = fileData.replace(/\//gi, '_');

    //dalsza część kodu
}

Po kliknięciu przycisku wysyłania pierwsze co musi się stać to schowanie owego guzika. Następnie z pola tekstowego file odczytujemy zakodowany plik i podmieniamy w nim pewne znaki. Ktoś może zapytać po co? Po odpowiedź odprowadzam do artykułu o base64 na Wikipedii a dokładniej to do akapitu pod tabelką. My będziemy transportować plik w ciągu zmienna1=wartosc1&zmienna1=wartosc2… więc musimy zadbać by żadne znaki nam nie uszkodziły danych. Dwie linijki z powyższego kodu realizują właśnie podmianę omówioną na Wikipedii.

Teraz możemy w końcu znapisać kod które wyśle wszystkie dane na serwer (np do pliku php/getFile.php):

$.ajax({
    type: "POST",
    url: "php/getFile.php",
    data:   "file="+fileData+
            "&name="+encodeURIComponent($("#"+eId+" .header .name").html())+
            "&description="+encodeURIComponent($("#"+eId+" textarea[name=\"description\"]").val()),
    //tu za chwilę dalszy ciąg kodu
});

Jak widać używamy tu funkcji ajax z biblioteki jQuery. Jako parametr data podajemy ciąg gdzie kolejno składamy zmienne file zawierającą kod base64, name zawierającą nazwę pliku oraz description zawierającą treść z pola tekstowego. Wartości pól name i description zabezpieczyliśmy funkcją encodeURIComponent aby dało się je bezpiecznie przesłać w tej formie. I tu znowu ktoś może zapytać dlaczego nie użyliśmy tej metody wcześniej przy zabezpieczaniu base64. Powód jest prosty. Wspomniana metoda podmienia wszystkie znaki specjalne. Jeśli plik waży kilka megabajtów (np. plik .mp3) to użycie omawianej metody powoduje chwilowe zawieszenie przeglądarki. A, że na szczęście w base64 występują tylko dwa psujaki to o wiele optymalnej jest użyć podmiany metodą replace.

Dane zostały wysłane więc teraz trzeba by było obsłużyć odpowiedź. Za nim to jednak zrobimy napiszmy:

Kod po stronie serwera

Tu nie będziemy się rozpisywać. Nie podam tu jakiegoś bardzo użytecznego kodu a tylko skrypt który pozwoli przetestować nam uploader i zrozumieć jak należy odbierać kod base64.

Jak widać w pliku getFile.php najpierw usuwamy z nazwy pliku podwójne kropki i ukośniki aby zapobiec, że jakiś spryciarz zapisze nam plik po za naszym folderem. Usuwamy także rozszerzenia z plików wykonywalnych dla bezpieczeństwa serwera i osoby która będzie te pliki przeglądać. Gdy to już zrobimy sprawdzamy czy nie ma takiego pliku w folderze do uploadu. Jeśli nie to wykonujemy dalszy kod, w przeciwnym wypadku zwracamy przeglądarce komunikat o błędzie. Komunikaty będziemy zwracać w formacie !. Wspomniany dalszy kod wygląda następująco:

$file = str_replace('-','+',$_POST['file']);
$file = str_replace('_','/',$file);
$f = fopen("files/".$name, "wb");
fwrite($f, base64_decode($file));
fclose($f);
$f = fopen("files/".$name.".txt", "wb");
fwrite($f, $_POST['description']);
fclose($f);
echo "ok!Plik zapisano";

Po pierwsze przywracamy podmienione wcześniej znaki. Po drugie otwieramy plik o odpowiedniej nazwie i zapisujemy do niego odkodowaną za pomocą base64_decodetreść pliku. Po trzecie zaś otwieramy plik o nazwie .txt i wrzucamy do niego opis napisany przez internautę. Po czwarte zwracamy komunikat, że wszystko poczło dobrze i po piąte…

Piszemy ostatni fragment kodu JS

Teraz wracamy do naszej niedokończonej funkcji ajaxowej i dopisujemy odbiór komunikatów:

    error: function(xhr, ajaxOptions, thrownError){
            $("#"+eId+" p.alert").text("Błąd połęczenia");
            $("#"+eId+" #startUpload").show();
        },
    success: function(msg){
            $("#"+eId+" #startUpload").show();
            var data = msg.split("!");
            switch(data[0]){
                case "error":    $("#"+eId+" p.alert").text(data[1]);
                                 break
                case "ok":       $("#"+eId+" p.alert").text(data[1]);
                                 $("#"+eId+" #startUpload").remove();
                                 break;
                default:         alert(msg);
                                 break;        
            }
        }

Funkcja napisana po parametrze error jest wykonywana gdy przeglądarka nie może połączyć się z serwerem lub znaleźć pliku. W takim przypadku wyświetlamy internaucie napis, że Brak połączenia i przywracamy przycisk by mógł spróbować raz jeszcze. Zaś success odnosi się do przypadku gdy serwer zwrócił nam jakąś sensowną odpowiedź. Wtedy także przywracamy przycisk a odpowiedź z serwera (zmienna msg) rozwalamy na dwie części znaną już metodą split. Potem sprawdzamy czy komunikat jest typu error czy ok i wykonujemy odpowiednie operacje: wyświetlamy treść komunikatu i ewentualnie kasujemy przycisk wysyłania jak wszystko poszło ok. Gdyby zaś nie udało nam się rozpoznać typu komunikatu (np. zwrócono nam błąd php) to wyświetlamy całość za pomocć alertu

Gotowiec

Wszystkie pliki potrzebne do uruchomienia stworzone uploadera można pobrać stąd.

Sortowalne elementy z zapisem kolejności

Elektryk — Fri, 09 Jul 2010 22:36:09 +0000

Wyobraźmy sobie sytuację, że mamy na swojej stronie kilka rubryczek ustawione w jednym rzędzie i w każdej jest zawartość która zainteresuje inne osoby np: sidebar z listami ostatnich wpisów osobno dla różnych kategorii. I teraz możemy mieć dylemat którą tematykę dać na górę a którą ukryć niżej. Jest jednak rozwiązanie: możemy pozwolić użytkownikom aby sami ustalali kolejność która później będzie przywracana przy każdym wczytaniu strony.

jQuery i wtyczki

Pisanie skryptu zaczynamy od pobrania jQuery i dołączenia do swojego kod, tak samo musimy zrobić z jQuery UI gdyż tam znajduję się plugin Sortable na którym oprzemy nasz skrypt. Gdy już to mamy możemy napisać kod html:


   matematyka
   fizyka
   chemia
   informatyka
   ekonomia

Box to nasz pojemnik z divami które będziemy sortować. Każdy z tych elementów musi mieć inne ID by skrypt mógł je rozpoznawać. Poniżej zaś kod JavaScript który uruchomi sortowanie:

$(".box").sortable({ items: '.element' });

W tym momencie będzie już działać sortowanie ale po odświeżeniu wszystkie elementy wrócą na swoje miejsce. Aby móc zapisać kolejność będziemy musieli skorzystać z mechanizmu ciastek. Aby ułatwić sobie ich obsługę skorzystamy z dwóch specjalnych funkcji które można skopiować stąd. Przyda się również wtyczka w jQuery do sortowania elementów DOM. Użyjemy qsort którą można pobrać tutaj. Gdy już wszystko podepniemy do naszej strony możemy zacząć pisać nasz skrypt.

Szczypta naszego kodu

Najpierw napiszemy kod do zapisywania kolejności. Aby to zrobić musimy do wcześniej napisanego wywołania funkcji sortable dopisać parę dodatkowych linijek.

$(".box").sortable({
   items: '.element',
   update: function(event, ui){
      var k = $(".box").sortable("toArray");
      var ks = k.toString();
      SetCookie('kolejnosc', ks, 30);
   }
});

Skorzystaliśmy tu z zdarzenia update które jest wywoływane zawsze gdy zmieniona zostanie kolejność elementów. Podpięta funkcja anonimowa najpierw uruchamia metodę toArray by wtyczka sortable zwróciła tablicę id kolejnych elementów, następnie otrzymana tablica jest serializowana by na końcu otrzymany ciąg został zapisany do ciasteczka.

Teraz pozostał nam jeszcze do napisania skrypt który po wczytaniu strony będzie ustawiał elementy w odpowiedniej kolejności. Oto i on:

if(GetCookie('kolejnosc')){
   var kol = GetCookie('kolejnosc').split(',');
   for(var j=0;j
Powyższą instrukcję należy wywołać gdy cała strona jest już załadowana. Skrypt działa następująco: najpierw sprawdzamy czy istnieje ciasteczko, jeśli tak to wyciągamy z niego informacje i deserializujemy je do tablicy. Następnie w pętli kolejnym sortowalnym elementom nadajemy value o wartości takiej jaką powinno zajmować miejsce. Gdy to już mamy zrobione uruchamiamy funkcję qsort i na końcu przedłużamy żywotność ciasteczka.
Cały skrypt  z dokładnymi komentarzami można skopiować tutaj a strona z gotowym efektem jest do zobaczenia w tym miejscu.

Jak mądrze dodawać zdarzenia JavaScript

Elektryk — Thu, 01 Jul 2010 13:22:57 +0000

Obecnie wszystkie przeglądarki z powodzeniem obsługują typowe zdarzenia JavaScript. Nie znaczy to jednak, że możemy umieszczać je w kodzie naszej strony jakkolwiek chcemy. Dalej bowiem roboty wyszukiwarek analizują strony pomijając wszelkie skrypty. Nieprawidłowe podpinanie zdarzeń może także źle wpłynąć na odbiór aplikacji przez internautę. Jak uniknąć zatem problemów? O tym właśnie będzie ten poradnik.

Przykład na linkach

Do najczęściej używanych zdarzeń JavaScript należą onClick, onMouseOver i onMouseOut. Najprościej dodać je w ten sposób:

Kliknij

W takim przypadku mamy wywołanie funkcji, za pomocą return false; blokujemy działanie linka a także w razie braku obsługi JS jesteśmy asekurowani przez odnośnik do pliku podstrona.html. Fajnie, ale IE7 strzeli nam focha. Poza tym nie jest to zbyt eleganckie rozwiązanie. Jak zaczniemy dodawać inne zdarzenia może dojść do niepotrzebnego bałaganu w kodzie. A przecież mamy jeszcze onBlur, onFocus, onChange itd. Jak zatem zrobić by wszyscy byli zadowoleni? Już śpieszę pokazać:

kliknij mnie!

Pewnie wielu z was zapyta „Dobra, a gdzie kod?”. Właśnie cała sztuczka polega na tym by rozdzielić kod HTML od JavaScript i wpakować ten drugi do sekcji head. Samo zdarzenie zaś podepniemy na podstawie dodanej klasy odnosnik.

Poniższy kod należy wstawić do sekcji head. Działa on bardzo prosto. Najpierw wszystkie istniejące na stronie odnośniki zapisujemy w tablicy elementya a potem w pętli sprawdzamy w każdym czy ma klasę odnosnik. Jeśli tak to podpinamy pod zdarzenie onClick funkcję jakas_funkcja pamiętając o pominięciu nawiasów po nazwie a także o umieszczeniu return false; na końcu naszej funkcji.

var elementya = document.getElementsByTagName('a');
for(i=0; i < elementya.length; i++) {
     if (elementya[i].className=='odnosnik') elementya[i].onclick = jakas_funkcja;
 }

Zamiast pisać osobną funkcję możemy także stworzyć tzw. funkcję anonimową którą umieszcza się od razu w powyższym kodzie:

var elementya = document.getElementsByTagName('a');
for(i=0; i < elementya.length; i++) {
if (elementya[i].className=='odnosnik') elementya[i].onclick = function() { alert(';P'); return: false; };
}

Dodaliśmy zaledwie trzy linijki kodu a mamy pewność, że wszystko będzie działało tak jak trzeba na każdej przeglądarce. W razie nie działania JavaScriptu nic także nie będzie przeszkadzać by adres spod linku normalnie się wyświetlił. Taki coś jest potrzebne przy na przykład tworzeniu Ajaxowych komentarzy. Fajnie jak się dodają bez odświeżania strony ale skrypt musi także obowiązkowo działać gdy użytkownik będzie miał zablokowane wykonywanie skryptów w przeglądarce.

A bez href?

Jeśli nasz skrypt nie wymaga href w trybie bez JS to możemy np. upodobnić do odnośników element span: