How to list the names of files successfully uploaded? - php

Question

I have a a form which contains a file input and upload button
<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='stopImageUpload(this);' class='imageuploadform' >
<p class='imagef1_upload_form' align='center'><label>Image File: <input name='fileImage' type='file' class='fileImage' /></label>
<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>
</p>
<p><span class='list></span></p>
</form>
Now what I want is that if an image has finished uploading, at the bottom of this form (in the span tag 'list') I want the name(s) of the file that have been uploaded. So when a file is successfully uploaded, then it should display the name of the uploaded file. If a second file is successfully upoaded, then it displays the name of the uploaded second file below the name of the first file.
Is this possible in Javascript?
I have uploading of files all sorted out in php and javascript. Below is javascript function after uploading is complete:
function stopImageUpload(success) {
var result = '';
if (success == 1) {
result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';
}
else {
result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
};
return true;
}​
This function is in the same page in the fomr but not in the same page as the uploading script but in the uploading script does call on this function using this javascript code below:
<script language="javascript" type="text/javascript">window.top.window.stopImageUpload(<?php echo $result; ?>);</script>
Below is part of the uploading php code where it uploads the file into the server:
move_uploaded_file($_FILES["fileImage"]["tmp_name"],"ImageFiles/" . $_FILES["fileImage"]["name"]);
$result = 1;

Answer 1

Your PHP callback should contain the name of the file currently uploaded, or even an array of all uploaded files.
Then, in the stopImageUpload function, read that second parameter and manipulate #list accordinly (update/add html):
<ul id="list"></ul>
function stopImageUpload(success, filename) {
var result;
if (success == 1)
result = '<li class="msg">The file '+filename+' was uploaded successfully!</li>';
else
result = '<li class="emsg">There was an error during upload of file '+filename+'!</li>';
$('#list').append(result);
return true;
}​