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.
