Wydziabałem prosty uploader plików bez potrzeby przeładowywania strony. Zbudowany w ten sposób że na stronie mam iframe a w nim formularz do upload plików. Wszystko pięknie działa pliki się uploadują a ajax je sobie na akcję onload iframe pakuje do wskazanego diva. Chciałbym uzyskać dodatkowy efekt w postaci nałożenia diva na iframe w momencie kiedy wysyłany jest formularz np: z jakimś gifo-preloaderem. Macie jakiś pomysł ?

Próbwałem do formularza z iframe dołożyć zdarzenie na onsubmit - funkcję upploading(); która ukrywałaby diva id#uploader ale wywołanie funkcji z ramki mi nie działa. Pewnie gdyby kod js do ukrycia formularza podczas przesyłania plików umieścił w ramce a nie wpliku głównym to by zadziałało ale plik do którego się odwołuję czyli upload.php ma obsługiwać tylko żadania uploadu i wyświetlania formularza.

[HTML] pobierz, plaintext 
  1. <form action="upload.php?mode=upload" enctype="multipart/form-data" method="post" onsubmit="upploading();">
  2. <input type="file" name="plik"><input type="submit" value="upload">
  3. </form>
[HTML] pobierz, plaintext


kod strony głównej:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  4. <title></title>
  5. <script type="text/javascript" src="prototype.js"></script>
  6. <script type="text/javascript">
  7. function requestAjax(){
  8.   var div = 'galery';
  9.   var url = 'upload.php?mode=dir';
  10. 	new Ajax.Request(url,
  11.   {
  12.     method:'post',
  13. 	 requestHeaders: [ 'Cache-Control', 'no-cache', 'Pragma', 'no-cache'],
  14. 	 encoding: 'utf-8',
  15. 	 asynchronous: 'true',
  16. 	 onSuccess: function(transport) { 
  17. 	 	var response = transport.responseText;
  18. 	 	$(div).innerHTML = response;
  19. 	 }
  20.   });
  21. }
  22.  
  23. function upploading(){
  24. document.getElementById('uploader').style.display = 'none';
  25. }
  26.  
  27. </script>
  28. <style type="text/css">
  29. #galery{ width:800px; height:300px; border: 1px solid #40CAFF; background-color: #DCDCDC; font-size:10px; }
  30. </style>
  31. </head>
  32. <body>
  33. <div id="galery"></div>
  34. <div id="uploader">
  35. <iframe onload="requestAjax();" src="upload.php?mode=form" style="width:500px; height:50px; border:none;" scrolling="no"></iframe>
  36. </div>
  37. </body>
  38. </html>
[HTML] pobierz, plaintext


plik upload.php
[PHP] pobierz, plaintext 
  1. <?php
  2. $mode = $_GET['mode'];
  3. if( $mode == 'form' ){
  4. 	echo'<form action="upload.php?mode=upload" enctype="multipart/form-data" method="post">
  5. 	<input type="file" name="plik"><input type="submit" value="upload">
  6. 	</form>';
  7. }
  8. if( $mode == 'upload' ){
  9.  
  10. 	if(is_uploaded_file($_FILES['plik']['tmp_name'])){
  11. 		move_uploaded_file($_FILES['plik']['tmp_name'], "upload/".$_FILES['plik']['name']);
  12. 	}
  13. 	echo'<form action="upload.php?mode=upload" enctype="multipart/form-data" method="post" onsubmit="upploading();">
  14. 	<input type="file" name="plik"><input type="submit" value="upload">
  15. 	</form>';
  16. }
  17. if( $mode == 'dir' ){
  18.  
  19. 	$dir = 'upload/';
  20. 	if (is_dir($dir)) {
  21. 	if ($dh = opendir($dir)) {
  22. 		while (($file = readdir($dh)) !== false) {
  23.  
  24. 				if( preg_match('/jpg|gif/',$file) ){
  25. 					echo '<img src="'.$dir.'/'.$file.'" width="100" height="100" alt="">';
  26. 				}
  27. 			}
  28. 		closedir($dh);
  29. 		}
  30. 	}
  31. }
  32. ?>
[PHP] pobierz, plaintext