Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] Pasek uploadu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
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ę.. smile.gif

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:

  1. position: fixed;
  2. top: 0px;
  3. left: 0px;
  4. width: 100%;
  5. height: 100%;
  6. background: black;
  7. opacity: 0.7;
  8. filter: alpha(opacity=70);
  9. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  10. z-index: 2;


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
Cytat
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/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.