JSON - append + ajax.form

2015-02-06 22:43:11 Post #1 prodan

 
Przerabiam jakiś skrypt uploadu php+ajax i mam problem z wyświetlaniem tego co zwróci skrypt PHP. Mam na stronie formularz do uploadu obrazków, który się odwołuje do pliku PHP w którym wrzucam plik na serwer oraz robię zapytanie do bazy. Problem pojawił się jak okazało się, że użytkownik może wrzucić 3 zdjęcia. Po każdym poprawnym uploadzie resetuje sobie ten formularz i wynikiem skryptu PHP jest wyświetlenie tego obrazka.

echo '<img src="./images/obrazek.jpg" />';


Tutaj jest ok, przy jednym wypluciu obrazka jest dobrze, ale jak wrzucę drugi obrazek (upload przechodzi poprawnie) to zamiast pojawić się drugi obrazek obok tego wcześniej wrzuconego to pojawia się nowy w miejscu tamtego. Próbowałem z append(), ale dalej jest to samo.

complete: function(response) {
				$("#images").append(response);
			}


response zwraca [object Object]

jak dam takie coś:
var options_image = { 
			target:   '#image_output',   // target element(s) to be updated with server response 
			beforeSubmit:  beforeSubmitImage,  // pre-submit callback 
			success:       afterSuccessImage,  // post-submit callback 
			uploadProgress: OnProgressImage, //upload progress callback 
			resetForm: true,        // reset the form after successful submit 
			complete: function(response) {
				alert(response);
				$("#images").append(""+response+"");
			}
		};

to wyskakują mi 2 takie same obrazki, a z każdym kolejnym zdjęciem kolejne 2, ale już nowego obrazku :/

Całość oparta na ajax.form

2015-02-06 23:39:56 Post #2 prodan

 
Dobra zrobiłem :d

Tylko teraz kolejne pytanko:

1. w skrypcie PHP wypluwam dla ajaxa takie coś:

echo json_encode($data);

gdzie $data to tablica, w której przechowuje różne informacje o pliku. Jest ok, ale problem polega na tym, że oprócz tego że to działa () to wypluwa mi również takie cudo:

{"success":true,"file_name":"123.png","file_id":"2"}

probowałem echo zamienić na return, ale dalej to samo. Mam kiepskie doświadczenie w JS i nie wiem zabardzo jak to zrobić żeby tego mi nie pokazywało

2. Jak zrobić w teorii usuwanie zdjęć?

3. Jak wyzej tylko jak ograniczyć wrzucenie plików dla usera do np. 3 szt?

2015-02-07 10:22:20 Post #3 nospor

 
ad1) Nie rozumiem o co ci chodzi...
{"success":true,"file_name":"123.png","file_id":"2"} to jest poprawnym obiektem json. Skoro robisz json_encode to logiczne ze dostajesz cos takiego. Z tego masz wybrac potem co cie interesuje

ad2) Jak usuwac? Normalnie. Jak chcesz do tego ajaxa, to wysylasz ajaxem id/nazwe pliku i i usuwasz

ad3) Liczysz ile user wyslal plikow i jak wysyla wiecej to dajesz komunikat ze nie moze.

2015-02-07 11:27:37 Post #4 prodan

 
Chodzi mi o to żeby mi nie wyświetlało tego, a tylko zwracało bez echo'wania słabo ogarniam ajaxa, próbowałem coś tam czytać na ten temat, ale korzystam z niego raz na 100 lat i nie ma sensu się w to zagłębiać bardziej dlatego szukam pomocy na forum.

probowałem dać return json_encode($return_array); ale wtedy w ogóle nic nie wyświetla i właśnie nie wiem jak do tego podejść

2015-02-07 13:00:57 Post #5 prodan

 
Nie no nie wiem próbowałem wszystkich znanych mi trików i nie mam pojęcia

2015-02-07 13:14:49 Post #6 nospor

 
JAk robisz
alert(response);
to sie nie dziw ze ci sie wyswietla...

Dane masz odbierac jako JSON a nie jako tekst. Wowczas pod
data.file
data.cosinnego
masz swoje dane z tablicy i robisz z nimi co chcesz.

Tu masz mase przykladow
http://api.jquery.com/jQuery.post/
np:
Example: Post to the test.php page and get content which has been returned in json format (<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>. 1
2
3
4	$.post( "test.php", { func: "getNameAndTime" }, function( data ) {
  console.log( data.name ); // John
  console.log( data.time ); // 2pm
}, "json");

2015-02-07 13:19:40 Post #7 prodan

 
No ale właśnie nie mam tego alert, usunąłem tamto:

complete: function(xhr) {
				result = xhr.responseText;
				result = $.parseJSON(result);

				if( result.success ){
					name = 'uploads/'+result.file_user_id+'/'+result.file_name;
					html = '';
					html+= '<img class="my_product_image" src="'+name+'" height="80" width="100" />';
					$('#images').append(html);
				}

			}

2015-02-07 14:14:55 Post #8 nospor

 
No i git. W czym wiec problem? Co ci sie gdzies wyswietla a nie powinno?
Pamietaj, ze ja ci w glowie nie siedze i nie widze co masz przed oczami.

2015-02-07 14:25:25 Post #9 prodan

 
No jest problem w tym że wyświetla mi:

http://s23.postimg.org/qfzflq4a3/Przechwytywanie.png

i nie wiem jak się tego pozbyć bo user to ma widzieć tylko te obrazki

2015-02-07 14:26:20 Post #10 nospor

 
Pokaz caly kod jaki masz a nie rzucasz tylko fragmentami.

2015-02-07 14:29:02 Post #11 nospor

 
target: '#image_output', // target element(s) to be updated with server response
O, pewnie to ci wrzuca twoje response do jakiegos image_output.... czego ty uzywasz? Masz uzyc normalnej akcji ajaxowej, lnka ci podalem. Nie masz uzywac jakis magicznych wtyczek ktore same z siebie robia przypisanie do wskazanego elementu

Odpowiedz

Ostatnio komentowane

  1. Mysql - FAQ Paweł
  2. Pager 2.5.1 oraz EPa... Na szybko2
  3. Pager 2.5.1 oraz EPa... Sławek
  4. Mysql - FAQ Piotr
  5. Liczba dni roboczych Na szybko2
  6. Liczba dni roboczych Naszybko
  7. Klasa widoku nospor

Skrypty użytkowników

  1. Klasa obsługi szablo... Lirdoner
  2. Sekcje user76
  3. Klasa walidująca for... user76
  4. Licznik Gości online korey
  5. Form Builder Comandeer
  6. Dynamiczny licznik z... korey
  7. Captcha Comandeer