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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
<script type="text/javascript" >
	$(function(){
		var btnUpload=$('#upload');
		var status=$('#status');
		new AjaxUpload(btnUpload, {
			action: 'upload-file.php',
			name: 'uploadfile',
			onSubmit: function(file, ext){
				 /*if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                    // extension is not allowed 
					status.text('Only JPG, PNG or GIF files are allowed');
					return false;
				}*/
				status.text('Uploading...');
			},
			onComplete: function(file, response){
				//On completion clear the status
				status.text('');
				//Add uploaded file to list
				if(response==="success"){
					$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
				} else{
					$('<li></li>').appendTo('#files').text(file).addClass('error');
				}
			}
		});
		
	});
	new Ajax.Updater('fileList', 'fileList.php', {parameters: { text: $F('text') }});
</script>

<link rel="stylesheet" type="text/css" href="./styles.css" />
</head>

<body>
<div id="main" >

	
	<div class="content">
		
		<?php include 'uploader.php';?>
	
	</div>

</div>

</body>

and the uploader.php

<div class="fileListing">
			<div class="fileHeader">
				Your files
			</div>
			<div class="fileList" id="fileList">
				<?php include 'fileList.php';?>
			</div>
		</div>
		<div class="uploaded">
		<!-- Upload Button, use any id you wish-->
		<!--<div id="upload" ><span>Upload File<span></div>-->
		<input type="button" value="Upload" id="upload"/>
		<div id="status" ></div>
		</div>

and fileList.php

<?php
				$dir = "uploads"; //You could add a $_GET to change the directory


				function getDirectoryTree( $outerDir){
				    $dirs = array_diff( scandir( $outerDir ), Array( ".", ".." ) );
				    $dir_array = Array();
				    foreach( $dirs as $d ){
				        if( is_dir($outerDir."/".$d) ) $dir_array[ $d ] = getDirectoryTree( $outerDir."/".$d );
				        else $dir_array[ $d ] = $d;
				    }
				    return $dir_array;
				} 
				function getFileList($tree,&$subLevel,$dir){
					$itemNumber = 0;
					$itemCount = count($tree);
					foreach($tree as $key => $item){
						$itemNumber++;
						
						if(!is_array($item)){
							
							echo $subLevel.'<span style="margin-left:'.($subLevel*15).'px;">'.$item.'</span><br/>';
							if($itemNumber == $itemCount){
								--$subLevel;
							}
						}
						else{
							if(is_dir($dir."/".$key))
							{
								$subLevel = substr_count($dir."/".$key,"/");
							}
							echo $key.'<br/>';
							unset($tree[$key]);
							array_push($tree,$item);
							getFileList($item,$subLevel,$dir."/".$key);
						}
						
						
					}
				}	
				$tree = getDirectoryTree($dir);
				$subLevel = 0;
				getFileList($tree,$subLevel,$dir);
				/*$files = scandir($dir);
				foreach($files as $key => $value){
					if(substr($value,0,1) != '.')
						echo "<a href='./uploads/$value' title='Download $value'>".$value."</a><br/>"; 
					//You could add an icon in here maybe, a link to the file/directory, or a link to list files in that directory
				}*/

Thanks for any help.

Thanks for the reply. I'm actually using that script also found here: http://valums.com/ajax-upload/
I'm using a version that allows for multiple file uploads and the examples given don't present any way of showing a file listing that is updated each time files are uploaded.

This article has been dead for over six months. Start a new discussion instead.