[HTML][PHP] Uploader w HTML5?, Co to znaczy? Opcje

[Asig]

Witam!

Czytałem trochę o uploaderze w HTML5 oraz to, że można w nim bez użycia JS/Jquery zrobić ProgressBar, ale szczerze mówiąc nie za bardzo to rozumiem, zwłaszcza z tego powodu, że szukając w google informacji na ten temat HTML'a było tam może z 10%, a reszta kodu to sam JS z bibliotekami...

Więc prosiłbym kogoś obeznanego o wyjaśnienie, pokazanie jakiegoś kodu Uploadera w oparciu o HTML5.

Oraz wyjaśnienie mi w "czym" ja piszę Uploader, do przenoszenia plików używam "move_uploaded_file", a kod html:

[HTML] pobierz, plaintext 
<form method="post" enctype="multipart/form-data" action="#">
<input name="APC_UPLOAD_PROGRESS" value="id przesyłu"> ---- do progressbaru
a tutaj iframe wykorzystujące JS+Jquery wyświetlające cały ProgressBar - cały progressbar działa w oparciu o moduł APC RFC
[HTML] pobierz, plaintext 

Dokładniej kod i działanie można sprawdzić na http://uphere.pl

Wiem co to Upload we Flashu, ale nie rozumiem co znaczy w HTML'u5 - a może to ten sposób w którym ja to piszę?

Proszę po prostu o jakieś objaśnienie

Dziękuję z góry,
Pozdrawiam.

Ten post edytował Asig 5.05.2014, 08:49:10

[wicek]

http://www.matlus.com/html5-file-upload-with-progress/

[Asig]

@wicek
I właśnie o tym mówię. Byłem już na tego typu stronach i ciągle nie rozumiem o co z tym chodzi, wygląda to jak zwykły HTML + JS z jakimś ASPX o którym czytałem na wiki: http://pl.wikipedia.org/wiki/ASP.NET co jeszcze bardziej mnie zagmatwało :/

[Tuminure]

HTML5 wprowadza tag <progress>. Do zmiany atrybutów, które są używane przy tym tagu (value, max) potrzebujesz użyć javascriptu.

Ten post edytował Tuminure 5.05.2014, 10:02:11

[Asig]

@Tuminure
Dzięki wielkie za informację
Teraz przynajmniej rozumiem czego szukać w google i mam przykład w praktyce: http://www.fanaticalcode.com/blog/wp-conte...ress_html5.html

I chyba już nawet wiem jak użyć go w praktyce przy uploadzie.

Jednak pozostaje tylko jedno pytanie, co jeśli przeglądarka nie obsługuje tego progres? czy jest jakiś odpowiedni tag czy coś, który pozwoli sprawdzić czy przeglądarka użytkownika obsługuje ten tag, a jeżeli nie obsługuje to wyświetli mu się zwykły progress?

[trueblue]

Znacznik <progress> nie załatwi uploadu, to tylko element prezentujący dane jakie mu dostarczysz.
Poczytaj o HTML5 File API: https://developer.mozilla.org/en-US/docs/Us...eb_applications
Będziesz i tak musiał użyć JS, i do tego jakiś skrypt uploadujący pliki na serwer (np. PHP).

Jak sprawdzić czy przeglądarka obsługuje tag progress: http://stackoverflow.com/questions/1599446...s-element-check

[Tuminure]

http://css-tricks.com/html5-progress-element/
ctrl+f What about browsers that don't support them?

[Asig]

@trueblue
Wiem, chodziło mi o to, że wiem jak wykorzystać ten <progress> w oparciu o JS, że na podstawie rozmiaru pliku przeliczyć go na % i odświeżać progres co np. 1 sekundę (tzn. obecnyrozmiar/calkowityrozmiar*100).

A co do obsługi to wiem które przeglądarki obsługują, lecz chodzi mi o jakiś warunek typu:

Kod

if(przeglądarka_obsluguje) { } elseif(przeglądarka_nie_obsluguje) { }

No i z tego co mi podaliście widzę, że jest taka możliwość dzięki JS.
Więc dzięki wielkie za pomoc i uświadomienie

Szczerze mówiąc spodziewałem się czegoś bardziej skomplikowanego, ale na szczęście nie jest to wcale takie trudne

Dzięki jeszcze raz i Pozdrawiam

[trueblue]

W linku, który Ci podałem przykłady przypisują true lub false do zmiennej, wystarczy, że ją sprawdzisz ifem.

Nie odświeżasz co sekundę, od tego jest zdarzenie "progress".

[Asig]

@trueblue
Faktycznie, nie przypatrywałem się tamtemu linkowi za dobrze.
W takim razie działa to o wiele lepiej niż stare metody, ponieważ działa bardziej "dynamicznie" bez opóźnień.
No nic, w wolnym czasie pobawię się dokładnie z tym, mam trochę linków do przeanalizowania więc "nudów" nie będzie

@Tak swoją drogą rozbroiło mnie w tamtym linku: "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB", ciekawe czy są jakieś pliki mające przynajmniej 1TB a co dopiero YobiBajty, ale może za 100 lat będą takie pliki

Ten post edytował Asig 5.05.2014, 11:16:55