Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ajax i zwrócenie wartości
Forum PHP.pl > Forum > XML, AJAX
Lord
15.03.2016, 00:18:31
Witam,

mam do zrobienia pewną rzecz, mianowicie upload obrazka i jak zostanie przesłany to mam go przesłac do skryptu gdzie mozna go cropować i teraz mam problem nie wiem jak pobrac wartość jaka zwroci ajax i potem wywołac w odpowiednim momencie ten skrypt tak zeby działało.

ogólnie zasada działania: pobieram obrazek i zapisuje na serwerze -> przekazuje url obrazka do 2 skryptu gdzie go użytkownik może przyciąć i zapisuje go. Oba skrypty działaja bardzo dobrze nistety nie mogę ich połaczyc w jedno.

[PHP] pobierz, plaintext 
  1. 		$(document).ready(function (e) {
  2. 			$("#uploadForm").on('submit',(function(e) {
  3. 				e.preventDefault();
  4. 				$.ajax({
  5. 					url: "upload.php",
  6. 					type: "POST",
  7. 					data:  new FormData(this),
  8. 					contentType: false,
  9. 					cache: false,
  10. 					processData:false,
  11. 					success: function(data)
  12. 					{
  13. 						$("#targetLayer").html(data);
  14. 						/* tutaj chce zwrocic zmiena data */
  15. 					},
  16. 					error: function() 
  17. 					{
  18.  
  19. 					} 	        
  20. 			   });
  21. 			}));
  22. 		});	   
  23.  
  24.  
  25. 	/* to ma sie "uaktywnic jak pobrany zostanie obrazek */
  26. 	var croppicVal = {
  27. 		uploadUrl:'img_save_to_file.php',
  28. 		cropUrl:'img_crop_to_file.php',
  29. 		modal:false,
  30. 		doubleZoomControls:false,
  31. 		rotateControls: false,
  32. 		loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
  33. 		onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
  34. 		onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
  35. 		onImgDrag: function(){ console.log('onImgDrag') },
  36. 		onImgZoom: function(){ console.log('onImgZoom') },
  37. 		onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
  38. 		onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
  39. 		onReset:function(){ console.log('onReset') },
  40. 		onError:function(errormessage){ console.log('onError:'+errormessage) }
  41. 	}
  42.  
  43. 	croppicVal.customUploadButtonId = "UploadSubmit";
  44. 	croppicVal.loadPicture = data; /* tu chce ja zapisac zmienna data */
  45.  
  46. 	var crop1 = new Croppic('crop1', croppicVal);	
  47. 	var crop2 = new Croppic('crop2', croppicVal);	
  48.  
  49.  
  50.  
  51. 	$(document).ready(function(){
  52. 		$("#CroppicSubmit").click(function(){
  53. 			crop1.crop();
  54. 			crop2.crop();
  55. 		});
  56. 	});		    
  57.  
  58.  
[PHP] pobierz, plaintext


Coś pokombinowałem i działa mi 2/3, ale jak teraz wywołać
[PHP] pobierz, plaintext 
  1. 		$("#CroppicSubmit").click(function(){
  2. 				crop1.crop();
  3. 				crop2.crop();
  4. 		});		
[PHP] pobierz, plaintext


zeby to zadziałało? bo teraz jest to wewnatrz funkcji i nie moge się do tego dostać ;(
[PHP] pobierz, plaintext 
  1.     <script>	
  2.  
  3. 		$(document).ready(
  4.  
  5. 			function (e) {
  6. 				$("#uploadForm").on('submit',(function(e) {
  7. 					e.preventDefault();
  8. 					$.ajax({
  9. 						url: "upload.php",
  10. 						type: "POST",
  11. 						data:  new FormData(this),
  12. 						contentType: false,
  13. 						cache: false,
  14. 						processData:false,
  15. 						success: function(data)
  16. 						{
  17. 							$("#targetLayer").html(data);
  18. 							/* tutaj chce zwrocic zmiena data */
  19. 							var crop1 = croppicSetData('crop1',data);
  20. 							var crop2 = croppicSetData('crop2',data);
  21. 						},
  22. 						error: function() 
  23. 						{
  24.  
  25. 						} 	        
  26. 				   });
  27.  
  28. 				}));
  29. 			}		
  30. 		);	   
  31.  
  32. 		function croppicSetData(divID, url) {
  33. 			/* to ma sie "uaktywnic jak pobrany zostanie obrazek*/
  34. 			var croppicVal = {
  35. 				uploadUrl:'img_save_to_file.php',
  36. 				cropUrl:'img_crop_to_file.php',
  37. 				modal:false,
  38. 				doubleZoomControls:false,
  39. 				rotateControls: false,
  40. 				loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
  41. 				onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
  42. 				onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
  43. 				onImgDrag: function(){ console.log('onImgDrag') },
  44. 				onImgZoom: function(){ console.log('onImgZoom') },
  45. 				onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
  46. 				onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
  47. 				onReset:function(){ console.log('onReset') },
  48. 				onError:function(errormessage){ console.log('onError:'+errormessage) }
  49. 			}
  50.  
  51. 			/*croppicVal.customUploadButtonId = "UploadSubmit";*/
  52. 			croppicVal.loadPicture = url; /* tu chce ja zapisac zmienna data */
  53. 			var crop = new Croppic(divID, croppicVal);
  54. 			return crop;
  55. 		}
  56.  
  57.  
  58.  
  59. 		$("#CroppicSubmit").click(function(){
  60. 				crop1.crop();
  61. 				crop2.crop();
  62. 		});			
  63.  
  64. 	</script>
  65.  
[PHP] pobierz, plaintext


Ok jakoś sobie poradziłem, tylko czy to ma ręce i nogi ;P moze ktoś napisze, człowiek się uczy cały czas a dobrze słuchać mądrzejszych smile.gif
[PHP] pobierz, plaintext 
  1. 		var crop1 = null;
  2. 		var crop2 = null;
  3.  
  4. 		$(document).ready(
  5.  
  6. 			function (e) {
  7. 				$("#uploadForm").on('submit',(function(e) {
  8. 					e.preventDefault();
  9. 					$.ajax({
  10. 						url: "upload.php",
  11. 						type: "POST",
  12. 						data:  new FormData(this),
  13. 						contentType: false,
  14. 						cache: false,
  15. 						processData:false,
  16. 						success: function(data)
  17. 						{
  18. 							$("#targetLayer").html(data);
  19. 							/* tutaj chce zwrocic zmiena data */
  20. 							if (crop1 !== null) {
  21. 								crop1.reset();
  22. 								crop1.destroy();
  23. 							}
  24. 							if (crop2 !== null) {
  25. 								crop2.reset();
  26. 								crop2.destroy();
  27. 							}			
  28.  
  29. 							crop1 = croppicSetData('crop1',data);
  30. 							crop2 = croppicSetData('crop2',data);
  31. 						},
  32. 						error: function() 
  33. 						{
  34.  
  35. 						} 	        
  36. 				   });
  37.  
  38. 				}));
  39. 			}		
  40. 		);	   
  41.  
  42. 		function croppicSetData(divID, url) {
  43. 			/* to ma sie "uaktywnic jak pobrany zostanie obrazek*/
  44.  
  45. 			var croppicVal = {
  46. 				uploadUrl:'img_save_to_file.php',
  47. 				cropUrl:'img_crop_to_file.php',
  48. 				modal:false,
  49. 				doubleZoomControls:false,
  50. 				rotateControls: false,
  51. 				loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
  52. 				onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
  53. 				onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
  54. 				onImgDrag: function(){ console.log('onImgDrag') },
  55. 				onImgZoom: function(){ console.log('onImgZoom') },
  56. 				onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
  57. 				onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
  58. 				onReset:function(){ console.log('onReset') },
  59. 				onError:function(errormessage){ console.log('onError:'+errormessage) }
  60. 			}
  61.  
  62. 			/*croppicVal.customUploadButtonId = "UploadSubmit";*/
  63. 			croppicVal.loadPicture = url; /* tu chce ja zapisac zmienna data */
  64. 			var crop = new Croppic(divID, croppicVal);
  65. 			return crop;
  66. 		}
  67.  
  68.  
  69.  
  70. 		$("#CroppicSubmit").click(function(){
  71. 				crop1.crop();
  72. 				crop2.crop();
  73. 		});			
  74.  
  75.  
[PHP] pobierz, plaintext
LowiczakPL
23.03.2016, 06:31:30
moja propozycja

[PHP] pobierz, plaintext 
  1. var obrazekData,img1,img2;
  2.  
  3. 		$(document).ready(
  4.  
  5. 			function (e) {
  6. 				$("#uploadForm").on('submit',(function(e) {
  7. 					e.preventDefault();
  8. 					$.ajax({
  9. 						url: "upload.php",
  10. 						type: "POST",
  11. 						data:  new FormData(this),
  12. 						contentType: false,
  13. 						cache: false,
  14. 						processData:false,
  15. 						success: function(data)
  16. 						{
  17. 							/* tutaj chce zwrocic zmiena data */
  18.  
  19. 							twojaFunkcjaCrop(data); // 1 = wywołanie funkcji po sukcesie
  20.                                                         obrazekData = data  // 2 = przypisanie do zmiennej
  21.  
  22.  
  23. 						},
  24. 						error: function() 
  25. 						{
  26.  
  27. 						} 	        
  28. 				   });
  29.  
  30. 				}));
  31. 			}		
  32. 		);	   
  33.  
  34. ......
  35.  
  36. twojaFunkcjaCrop(img) {
  37.   crop1 = croppicSetData('crop1',img);
  38.   crop2 = croppicSetData('crop2',img);
  39. }
  40.  
  41. crop1 = croppicSetData('crop1',obrazekData);
  42. crop2 = croppicSetData('crop2',obrazekData);
  43.  
[PHP] pobierz, plaintext
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.