[PHP][JavaScript]Rejestracja z dynamicznie wycinanym zdjęciem, Wycinanie zdjęcia przez JS podczas rejestracji Opcje

[zaiac]

Witajcie,

Googlam i googlam i wygooglać nie mogę - może wy mi trochę pomożecie
Próbuję zrobić formularz rejestracyjny, który umożliwi użytkownikowi wrzucenie swojej fotki dociętej dynamnicznie przez skryp JSowy.
Miałoby to wyglądać mniej więcej tak:

1. Użytkownik wypełnia dane przy rejestracji, na dole przy pozycji Zdjęcie jest „Przeglądaj…”
2. Użytkownik wybiera plik, który jest walidowany (rozmiar, rozszerzenie, itp.).
3. Jeśli plik przeszedł pomyślnie walidację to jest otwierany w popupie (za pomocą JS wycięcie kawałka fotki).
4. Użytkownik kończy wycięcie klikając OK na popupie.
5. Popup jest zamykany, wycięty kawałek fotki jest wklejany na formularz rejestracyjny.
6. Pod formularzem rejestracji jest przycisk „Zarejestruj”, którego kliknięcie powoduje zapis danych do bazy i pliku na dysk.

Mam odpowiedniego JSa, mam walidację pliku, mam formularz rejestracyjny ale nie potrafię tego wszystkiego pożenić

Pytanie 1: Jak przeprowadzić walidację pliku przed walidacją całości formularza rejestracyjnego - formularz w formularzu?
Pytanie 2: Jak przekazać wybrane zdjęcie do popupa?
Pytanie 3: Jak przekazać wycięty kawałek fotki do formularza rejestracyjnego i jak go "odświeżyć" żeby ten wycięty kawałek był widoczny na formularzy rejestracyjnym?

Jeśli jesteście w stanie odpowiedzieć na któreś z tych pytań to baaaardzo proszę o pomoc.
Z góry dzięki!

[Fifi209]

Pytanie 1: Jak przeprowadzić walidację pliku przed walidacją całości formularza rejestracyjnego - formularz w formularzu?
Pytanie 2: Jak przekazać wybrane zdjęcie do popupa?
Pytanie 3: Jak przekazać wycięty kawałek fotki do formularza rejestracyjnego i jak go "odświeżyć" żeby ten wycięty kawałek był widoczny na formularzy rejestracyjnym?

Jeśli jesteście w stanie odpowiedzieć na któreś z tych pytań to baaaardzo proszę o pomoc.
Z góry dzięki!

1. Js onsubmit
2. No chyba wgrać je na serwer i przekazać ;d

Jak dla mnie to bardziej ajax.

[zaiac]

Ad 2 - Chciałbym zapisywać na serwerze plik dopiero po akceptacji całości rejestracji. Chyba żeby zapisywać jakieś pliki tymczasowe i później je kasować. Macie jakieś inne pomysły?

[sowiq]

Jeśli chcesz zrobić prawdziwą walidację, a nie tylko porównanie rozszerzenia, to musisz wrzucać plik na serwer. Może to być jedynie plik tymczasowy, a katalog z takimi plikami możesz czyścić co 30 min.

Do kadrowania zdjęć polecam: http://deepliquid.com/projects/Jcrop/demos...?demo=live_crop

Jeśli już będziesz używał jQuery to możesz od razu pobrać wtyczkę do wysyłania plików w tle i zrobić bardzo przyjemny systemik rejestracji oparty o Ajax'a.

[zaiac]

Właśnie JCropa używam Możesz coś więcej napisać jeśli chodzi o "wysyłanie plików w tle"? Co masz na myśli, w jakim zakresie możnaby użyć Ajaxa?

[sowiq]

Wysyłanie plików w tle (niektórzy mylnie nazywają to wysyłaniem za pomocą Ajax'a) odbywa się bez przeładowania strony. Dynamicznie tworzona jest ukryta ramka, do której submitowany jest formularz.

http://valums.com/wp-content/uploads/ajax-...demo-jquery.htm
http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

[zaiac]

Ciekawa sprawa - poczytałem, ale nie wiem jakbym miał wykorzystać to u siebie.
Z formularza rejestracyjnego chcę otworzyć "Wycinankę" w popupie i później zwrócić wycięty fragment do głównego formularza. W jaki sposób tu mógłby pomóc Ajax?

[sowiq]

Tu akurat może się nie przydać

Robisz tak:
- formularz z polem wyboru pliku (obrazka), submituje się do pop-up'a (jeśli nie wiesz jak to zrobić to dojdziemy zaraz)
- w nowym okienku wykonuje się skrypt, który zapisuje gdzieś plik tymczasowy, zapamiętuje jego ścieżkę i wyświetla ten obrazek do kadrowania
- po wykadrowaniu klikasz OK i wysyłasz dane dotyczące kadrowania (cały czas w tym okienku pop-up)
- Twój plik tymczasowy jest teraz obcinany, nadawana jest mu jakaś nazwa i zapisywany jest już jako normalny plik
- za pomocą JS okienko wysyła do windows.opener potrzebne informacje (czyli ścieżkę do pliku) i zamyka się samo
- duże okienko odbiera informację (tak na prawdę pop-up wywołuje jakąś funkcję dużego okna) - skoro zna już adres obrazka, to może go wyświetlić pod formularzem i wpisać tą nazwę do jakiegoś ukrytego pola formularza, żeby podczas zapisu nowego usera do bazy przypisać mu odpowiedni plik z obrazkiem.
- ta da.

Jeśli namotałem to wybacz - zmęczony już jestem.

Ten post edytował sowiq 20.04.2009, 23:06:43

[zaiac]

No to tak:
1. Popupa wyświetlam tak (jak przekazać sam zuploadowany plik?)

[PHP] pobierz, plaintext 
<?php
<input type="file" name="file"/> 
<input type="submit" name="upload" value="Upload" onClick="window.open('PhotoCrop.php','CropWindow')"/>
?>
[PHP] pobierz, plaintext 

2. Jak już dostanę plik - patrz punkt 1 to oki
5. W jaki sposób? Na onclicku konczącym wycinanie?

PS - dzięki za dotychczasową pomoc

[sowiq]

1. <form target="CropWindow" ... > <= w ten sposób przekażesz cały formularz do nowego okna (oczywiście zachowując to, co napisałeś wcześniej). Nie da się wysłać tylko wybranych pól. Ew. do obrazka możesz zrobić oddzielny formularz - i tak go później nie używasz.

5. Klikasz na ok - wysyłają się dane (współrzędne i rozmiary obrazka do obcięcia). Strona w pop-up sie przeładowuje. Jako wynik do przeglądarki leci tylko <script type="text/javascript"> window.opener.jakasFunkcja('nazwaObrazka.gif'); window.close(); </script>

Na początek spróbuj z: window.opener.alert('Udało się...');

Ten post edytował sowiq 20.04.2009, 23:44:30

[zaiac]

Coś chyba robię nie tak, bo pisząc coś takiego:

[PHP] pobierz, plaintext 
<?php
<form target="CropWindow" enctype="multipart/form-data" method="post">
    <input type="file" name="file"/> 
    <input type="submit" name="upload" value="Upload" onClick="window.open('PhotoCrop.php','CropWindow','width=800,height=600,scrollbars=yes,location=no,status=no')"/>
</form>
?>
[PHP] pobierz, plaintext 

w popupie pokazuje mi się dokładna kopia formularza z "głównej" strony - a danych uploadowanego zdjęcia nie ma.
Chyba już jest za późno dzisiaj Opisz troszkę jaśniej proszę jak proponowałeś rozwiązać tę kwestię.

[sowiq]

Zapomniałeś o action:

<form target="CropWindow" action="PhotoCrop.php" ...>

[zaiac]

Ale ciągle pozostaje ten sam problem - jak uzyskać dostęp do zuploadowanego zdjęcia?

[sowiq]

- w nowym okienku wykonuje się skrypt, który zapisuje gdzieś plik tymczasowy, zapamiętuje jego ścieżkę i wyświetla ten obrazek do kadrowania
[...]
- Twój plik tymczasowy jest teraz obcinany, nadawana jest mu jakaś nazwa i zapisywany jest już jako normalny plik
- za pomocą JS okienko wysyła do windows.opener potrzebne informacje (czyli ścieżkę do pliku) i zamyka się samo
- [...] skoro zna już adres obrazka, to może go wyświetlić pod formularzem [...]

[zaiac]

Wybacz ale pomimo moich starań nadal jestem w lesie. Wygląda to w tej chwili w ten sposób:

[HTML] pobierz, plaintext 
<form target="CropWindow" action="PhotoCrop.php" enctype="multipart/form-data" method="post">
	<input type="file" name="file"/> 
	<input type="submit" name="upload" value="Upload" onClick="window.open('PhotoCrop.php','CropWindow')"/>
	<input type="hidden" name="MAX_FILE_SIZE" value="500000" />
</form>
[HTML] pobierz, plaintext 

i w PhotoCrop.php:

[PHP] pobierz, plaintext 
<?php
if ($_FILES['file']['tmp_name']){
    echo $_FILES['file']['tmp_name'];
}
else
    echo "Nie ma pliku";
?>
[PHP] pobierz, plaintext 

No i w popupie ciągle dostaję "Nie ma pliku".

[sowiq]

Zrobiłem sobie na szybko i działa na 100%:

[HTML] pobierz, plaintext 
// test.php :
<?php  if(!empty($_FILES)){
    print_r($_FILES);
}
else{
?>
<form target="CropWindow" onsubmit="window.open('about:blank','CropWindow', 'width=200, height=200'); return true;" action="test.php" enctype="multipart/form-data" method="post">
<input type="file" name="file"/>
<input type="submit" name="upload" value="Upload" />
<input type="hidden" name="MAX_FILE_SIZE" value="500000" />
</form>
<?php  }
?>
[HTML] pobierz, plaintext 

Czasami przychodzi moment, że warto się zastanowić, czy dalej próbować robić coś samemu, czy po prostu zlecić to komuś, kto się trochę zna.

Pozdrawiam.

Ten post edytował sowiq 21.04.2009, 18:06:22

[zaiac]

Czasami przychodzi moment, że warto się zastanowić, czy dalej próbować robić coś samemu, czy po prostu zlecić to komuś, kto się trochę zna.

Pozdrawiam.

Eeee tam, tak łatwo się nie poddaje - zresztą masz dobry algorytm w stopce To czy wychodzi to raz a to ile się człowiek przy okazji nauczy to dwa

Wracając do tematu - wypróbowałem i działa, teraz próbuję dalej obsłużyć wszystko tak jak zaplanowałem.
Zastanawiam się w jaki sposób mogę zwalidować poprawność uploadowanego pliku jeszcze przed wyświetleniem popupa, tak żeby wyświetlić ew. błędy jeszcze na głównym ekranie i przy błędnej walidacji nie wyświetlać popupa - jakiś hint?

Ten post edytował zaiac 21.04.2009, 21:35:04

[sowiq]

To czy wychodzi to raz a to ile się człowiek przy okazji nauczy to dwa

Wzorowe podejście

zresztą masz dobry algorytm w stopce

Jedyny właściwy

żeby wyświetlić ew. błędy jeszcze na głównym ekranie i przy błędnej walidacji nie wyświetlać popupa - jakiś hint?

Bez wysyłania formularza możesz to zrobić na dwa sposoby, ale i tak sprowadzają się one do jedengo:
1. za pomocą JS możesz sprawdzić rozszerzenie pliku (ale i tak dla pewności musisz jeszcze raz na serwerze sprawdzić, czy masz do czynienia z obrazkiem)
2. za pomocą np. Ajax File Upload wysyłasz w tle plik i sprawdzasz go na serwerze. Jeżeli jest ok, to zwracasz ajax'em 'komunikat', że można otworzyć okno. I wtedy nie musiałbyś drugi raz wysyłać pliku na serwer, bo już się tam znajduje. Ten sposób jest pewniejszy, ale wymaga większego wkładu pracy.

[zaiac]

Udało mi się po kilku dniach przerwy od tematu dojść do momentu, że przez window.opener zwracam nazwę pliku już wyciętego i zapisanego na serwerze.
Jedyne co mi się jednak udało to wyświetlenie nazwy pliku w polu tekstowym, natomiast nie wiem jak wyświetlić to zdjęcie w tagu <img> mając zwróconą nazwę pliku w zmiennej "x". Przez $_REQUEST['x'] się nie da, przez $x też nie - więc jak się do niej dobrać?