| | |
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
![]() |
•
•
Join Date: Jul 2009
Posts: 12
Reputation:
Solved Threads: 0
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:
and the uploader.php
and fileList.php
Thanks for any help.
My code:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!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>
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<?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.
![]() |
Similar Threads
- File upload problem (PHP)
- Multiple File(s) upload without Multiple Browse option (ASP.NET)
- unlimited file upload fields (PHP)
- Php file upload (PHP)
- file upload (ASP.NET)
- File Upload Variables (PHP)
- problem with my file upload (PHP)
- File Upload Help (PHP)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Reload a element with swf
- Next Thread: FAVOURITE & HOME ICON on WEB PAGE
| Thread Tools | Search this Thread |
acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug captchaformproblem checkbox close codes createrange() css cursor debugger decimal dependent disablefirebug dom download dropdown editor element engine error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math media microsoft mp4 object onmouseoutdivproblem onreadystatechange paypal pdf php player position programming progressbar prototype redirect regex runtime safari scale scriptlets search security select size software sql text textarea unicode w3c window windowofwords windowsxp wysiwyg \n





