[PHP][JavaScript]auto tworzenie minaturek obrazka w formularzu Opcje

[piekloniebo]

Witam,
Czy ktoś może wie gdzie mogę znaleźć klasę albo jakiegoś tutoriala jak zrobić w formularzu automatyczne wgrywanie obrazka i tworzenie jego miniaturki jeszcze przed naciśnięciem
"submit".

Coś takiego jak ma allegro.
Chciałbym to zaimplementować w moim skrypcie ale nie mogę znaleźć opisu i kodu.


Tu wstawiam linka do przykładowej strony z "płatnym rozwiązaniem", które oczywiście mnie nie interesuje bo jest płatne...

auto create



Pozdrawiam,
Darek

[kipero]

Chyba nie ma opcji, żeby wygenerować i wyświetlić miniaturę pliku z dysku, bez jego wysyłania. W podanym przez Ciebie przykładzie plik jest uploadowany w tle z użyciem AJAXa i to serwer generuje miniaturę.

Poczytaj: http://www.ajaxf1.com/tutorial/ajax-file-u...d-tutorial.html

Ten post edytował kipero 16.06.2009, 11:50:47

[piekloniebo]

Dzięki za odp.
no tak mi się wydawało. Bo php nie wykona żadnej operacji przed naciśnięciem submit, rajt?

Więc chyba przegogluję net teraz w poszukiwaniu rozwiązania "ajax + php auto upload"....

pewnie jakiś javascript onChange w polu file też może to obsługiwać...

Jakbyś może miał w głowie jakiś link do jakiego tutoriala albo scryptu który będę mógł sobie porozkmilać to będę wdzięczny....




Dobra cofam nie zauważyłem twojego linku...
Już otworzyłem...
Dzięki za pomoc....

[Pawel_W]

ehh wcale nie jest powiedziane że to musi być ajax albo php - wystarczy zwykły javascript image resizer - sprawdzasz czy wartosc pola file zostala zmieniona, a jak tak to tworzysz w js new Image, podajesz jako src wartosc pola i pobierasz wymiary ;]

EDIT:
tu masz pełny kod:

[HTML] pobierz, plaintext 
<script type="text/javascript">
function miniatura(obj)
{
var img = new Image();
img.src = obj.value;
w = img.width;
h = img.height;
 
maxx = 500; // maksymalna szerokosc miniaturki
maxy = 500; // maksymalna wysokosc miniaturki
 
if(w > maxx && h > maxy)
{
hx = h / maxy;
wx = w / maxx;
 
if(hx > wx)
{
w = h/hx;
h = w/hx;
}
else
{
h = h/wx;
w = w/wx;
}
}
image_obj = document.getElementById(obj.name);
image_obj.src = obj.value;
image_obj.style.width = w+"px";
image_obj.style.height = h+"px";
image_obj.style.display = "block";
obj.style.display = "none";
}
</script>
<img src="" id="image1" style="display: none">
<input type="file" onchange="miniatura(this)" name="image1">
[HTML] pobierz, plaintext 

Ten post edytował Pawel_W 16.06.2009, 13:11:12

[piekloniebo]

naszperałem się cały dzień po necie a tu się okazuje że w Firefoxie nie ma możliwości zrobienia autopodglądu lokalnych plików.
No to chyba to odpuszczam.
Jest trochę rozwiązań na necie i twoje Pawel to z Javascriptem tez jest ok ale w Firefoxie mi nie śmiga a chciałbym na stronie miec uniwersalne rozwiązania.
Dzięki za pomoc mimo wszystko....

Chyba że jestem w błędzie.
Jeżeli ktoś zna uniwesalne rozwiązanie które działa w Explorerze i Firefoxie to niech wrzuci linka do kodu.

Pozdrawiam,
Darek

[erix]

Jest trochę rozwiązań na necie i twoje Pawel to z Javascriptem tez jest ok ale w Firefoxie mi nie śmiga a chciałbym na stronie miec uniwersalne rozwiązania.

Zostaje wysłanie na serwer pełnego pliku i wyświetlanie via prosty img, który docinasz...

[piekloniebo]

Ale właśnie sprawdziłem na allegro i działa u nich ładowanie automatyczne. Czy ktoś wie jakie to jest rozwiązanie. Pewnie jakiś javascript. Jeżeli ktoś wie gdzie można znaleźć taki kod do zaadoptowania to niech wstawi linka.
Ja pracuję aktualnie nad takim kilkuetapowym formularzem dodawania produktu do sklepu.
Jedna ze stron ma dodać dwa zdjęcia produktu.
Chciałbym żeby osoba która kliknie guzik dodaj zdjęcie i wybierze plik miała w ciągu kilku sekund możliwość obejrzenia miniaturki dodanego zdjęcia.

Tak się dzieje na allegro.
Przy guziku dodaj zdjęcie jest adnotacja (zdjęcie załaduje się automatycznie w ciągu kilku sekund) i tak się dzieje niezaleznie od przelądarki. Również w firefoxie to działa. Sprawdziłem..


Pozdrawiam,
Darek

[erix]

Ale właśnie sprawdziłem na allegro i działa u nich ładowanie automatyczne. Czy ktoś wie jakie to jest rozwiązanie. Pewnie jakiś javascript. Jeżeli ktoś wie gdzie można znaleźć taki kod do zaadoptowania to niech wstawi linka.

Nie wiem, jak jest na allegro, ale rozwiązanie jest iście diabelskie: w tle jest tworzona ramka i na nią ustawiany jest target formularza, w którym wybierasz obrazek. [;

[piekloniebo]

Znalazłem coś takiego z użyciem Ajax:
AJAX FILE UPLOAD

[dr_bonzo]

Kilkuetapowe dodawanie produktu do sklepu?

Na samym poczatku utworz produkt (na razie "nieskonczony" i ukryty) i wtedy wszystko mozesz sobie ladnie dodawac.
Na koniec usuwasz (wraz z fotkami i miniaturkami) lub zapisujesz ten produkt.

A co do samego uploadu: http://swfupload.org/ - wymaga flasza, ale daje ci mozliwosc jednorazowego zaznaczenia wielu plikow + progressbar.