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-"></script>
<script type="text/javascript" >
		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;
			onComplete: function(file, response){
				//On completion clear the status
				//Add uploaded file to list
					$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
				} else{
	new Ajax.Updater('fileList', 'fileList.php', {parameters: { text: $F('text') }});

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

<div id="main" >

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



and the uploader.php

<div class="fileListing">
			<div class="fileHeader">
				Your files
			<div class="fileList" id="fileList">
				<?php include 'fileList.php';?>
		<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>

and fileList.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){
							echo $subLevel.'<span style="margin-left:'.($subLevel*15).'px;">'.$item.'</span><br/>';
							if($itemNumber == $itemCount){
								$subLevel = substr_count($dir."/".$key,"/");
							echo $key.'<br/>';
				$tree = getDirectoryTree($dir);
				$subLevel = 0;
				/*$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.