[js] Pasek uploadu, Pasek pokazujący postęp ładowanego pliku Opcje

[korey]

Witam..

Napisałem sobie skrypt uploadu zdjęć, działa on jak trzeba i teraz chciałem go nieco odpicować.
przechodząc do rzeczy to chciałbym aby podczas ładowania fotki przyciemniło się okno przeglądarki oraz na środku pojawił się pasek pokazujący postęp ładowania.

myślę ze w php nie da się tego osiągnąć a z JS to znam tylko komende document.write(); dlatego prosiłbym o pomoc, tutoriale jak osiągnąć efekt o którym piszę..

Z góry dziękuję

[norbis]

Generalnie można ten efekt uzyskać na trzy sposoby: HTML5, Flash lub ajax. Najprościej w HTML5, ale nie działa na IE, żeby zrobić to ajaxem potrzebowałbyś jakąś bibliotekę z PEAR (nie pamiętam nazwy, ale rzadko jest instalowana). Pozostaje więc flash, popularniejszy jest chyba FancyUpload:

http://digitarald.de/project/fancyupload/3.../attach-a-file/

Dość łatwo się go instaluje, ale bez doświadczenie z JS może Ci być ciężko cokolwiek zmienić pod swoje wymagania. Efekt przyciemnienia uzyskasz wstawiając DIV z tymi stylami:

[HTML] pobierz, plaintext 
position: fixed; 
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: black;
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
z-index: 2;
[HTML] pobierz, plaintext 

Musi być z początku ukryty przez dodanie stylu display: none i po rozpoczęciu wgrywania ustawiasz display: block;

[korey]

moja stronka jest anty IE. tzn zrobiłem tak ze na ej przeglądarce nie będzie wyświetlana.
zaraz przeanalizuje ten link. i powiedz-daj wskazówki jak to w html zrobic.

pozdrawiam

[erix]

i powiedz-daj wskazówki jak to w html zrobic.

Tzn?

Jak chcesz mieć uploadowanie z paskiem postępu, to - w zasadzie - zostaje tylko flash: http://eriz.pcinside.pl/weblog/javascript-...amkowy-227.html

[norbis]

Chodziło mu o HTML5, bo jak napisał nie musi działać na IE.

Tu masz bardzo prostą implementację: http://www.3site.eu/jstests/upload/
A tu bardziej zaawansowaną z obsługą drag & drop: http://www.wnz.be/demo/uploader/