JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Update div for filelisting after file upload using ajax

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jul 2009
Posts: 12
Reputation: Magicianer is an unknown quantity at this point 
Solved Threads: 0
Magicianer Magicianer is offline Offline
Newbie Poster

Update div for filelisting after file upload using ajax

 
0
  #1
Jul 3rd, 2009
I'm using a script called Ajax Upload to upload files. I have a div that has a php script inside so that when the page loads I can see the listing of all the files. My problem is that I want to update this list of files without having to refresh the page.

My code:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
  3. <head profile="http://gmpg.org/xfn/11">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.  
  6. <script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
  7. <script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
  8. <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
  9. <script type="text/javascript" >
  10. 	$(function(){
  11. 		var btnUpload=$('#upload');
  12. 		var status=$('#status');
  13. 		new AjaxUpload(btnUpload, {
  14. 			action: 'upload-file.php',
  15. 			name: 'uploadfile',
  16. 			onSubmit: function(file, ext){
  17. 				 /*if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
  18.                     // extension is not allowed 
  19. 					status.text('Only JPG, PNG or GIF files are allowed');
  20. 					return false;
  21. 				}*/
  22. 				status.text('Uploading...');
  23. 			},
  24. 			onComplete: function(file, response){
  25. 				//On completion clear the status
  26. 				status.text('');
  27. 				//Add uploaded file to list
  28. 				if(response==="success"){
  29. 					$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
  30. 				} else{
  31. 					$('<li></li>').appendTo('#files').text(file).addClass('error');
  32. 				}
  33. 			}
  34. 		});
  35.  
  36. 	});
  37. 	new Ajax.Updater('fileList', 'fileList.php', {parameters: { text: $F('text') }});
  38. </script>
  39.  
  40. <link rel="stylesheet" type="text/css" href="./styles.css" />
  41. </head>
  42.  
  43. <body>
  44. <div id="main" >
  45.  
  46.  
  47. 	<div class="content">
  48.  
  49. 		<?php include 'uploader.php';?>
  50.  
  51. 	</div>
  52.  
  53. </div>
  54.  
  55. </body>
and the uploader.php
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <div class="fileListing">
  2. 			<div class="fileHeader">
  3. 				Your files
  4. 			</div>
  5. 			<div class="fileList" id="fileList">
  6. 				<?php include 'fileList.php';?>
  7. 			</div>
  8. 		</div>
  9. 		<div class="uploaded">
  10. 		<!-- Upload Button, use any id you wish-->
  11. 		<!--<div id="upload" ><span>Upload File<span></div>-->
  12. 		<input type="button" value="Upload" id="upload"/>
  13. 		<div id="status" ></div>
  14. 		</div>
and fileList.php
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <?php
  2. 				$dir = "uploads"; //You could add a $_GET to change the directory
  3.  
  4.  
  5. 				function getDirectoryTree( $outerDir){
  6. 				    $dirs = array_diff( scandir( $outerDir ), Array( ".", ".." ) );
  7. 				    $dir_array = Array();
  8. 				    foreach( $dirs as $d ){
  9. 				        if( is_dir($outerDir."/".$d) ) $dir_array[ $d ] = getDirectoryTree( $outerDir."/".$d );
  10. 				        else $dir_array[ $d ] = $d;
  11. 				    }
  12. 				    return $dir_array;
  13. 				} 
  14. 				function getFileList($tree,&$subLevel,$dir){
  15. 					$itemNumber = 0;
  16. 					$itemCount = count($tree);
  17. 					foreach($tree as $key => $item){
  18. 						$itemNumber++;
  19.  
  20. 						if(!is_array($item)){
  21.  
  22. 							echo $subLevel.'<span style="margin-left:'.($subLevel*15).'px;">'.$item.'</span><br/>';
  23. 							if($itemNumber == $itemCount){
  24. 								--$subLevel;
  25. 							}
  26. 						}
  27. 						else{
  28. 							if(is_dir($dir."/".$key))
  29. 							{
  30. 								$subLevel = substr_count($dir."/".$key,"/");
  31. 							}
  32. 							echo $key.'<br/>';
  33. 							unset($tree[$key]);
  34. 							array_push($tree,$item);
  35. 							getFileList($item,$subLevel,$dir."/".$key);
  36. 						}
  37.  
  38.  
  39. 					}
  40. 				}	
  41. 				$tree = getDirectoryTree($dir);
  42. 				$subLevel = 0;
  43. 				getFileList($tree,$subLevel,$dir);
  44. 				/*$files = scandir($dir);
  45. 				foreach($files as $key => $value){
  46. 					if(substr($value,0,1) != '.')
  47. 						echo "<a href='./uploads/$value' title='Download $value'>".$value."</a><br/>"; 
  48. 					//You could add an icon in here maybe, a link to the file/directory, or a link to list files in that directory
  49. 				}*/

Thanks for any help.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxexample ajaxjspservlets array browser bug captchaformproblem cart checkbox child class close codes cookies createrange() css cursor date debugger decimal dependent design disablefirebug dom dropdown editor element embed engine enter events explorer ext file firefox focus form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post programming progressbar prototype redirect runtime safari scale scriptlets scroll search security session shopping size software toggle unicode variables web wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC