Use same <li> for load and succes?

JavaScript
1

I’m trying to set up an upload script in ajax using jquery and allmost got it working except 1 thing.

Whenb a file is uploading a loading gif is shown within <li></li> tags. When the file is done the file is shown within <li></li> tags but in a new box… How do I get the uploading image to go into the same <li></li> box as trhe waiting animation gif?

Here is what I have so far:

$(function(){
	var btnUpload=$('#upload');
	var status=$('#status');
	new AjaxUpload(btnUpload, {
		action: 'upload.php',
		name: 'uploadfile',
		onSubmit: function(file, ext){
			 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
				// If the ext. is not allowed 
				status.text('Only JPG, PNG or GIF files are allowed');
				return false;
			}
			$('<li></li>').appendTo('#loadstatus').html('<img src="waiting.gif" />').addClass('success');
		},
		onComplete: function(file, response){
			//Add the file to a list
			if(response==="success"){
				$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />').addClass('success');
			} else{
				$('<li></li>').appendTo('#files').text(file).addClass('error');
			}
		}
	});
	
});

<div id="upload"><span>The file<span></div>
<ul id="loadstatus" ></ul>
<ul id="files" ></ul>

Any ideas…?

2

It’s because you’re adding the waiting img to ‘#loadstatus’ but loading the file into ‘#file’. Why?

Try changing the following:


if(response==="success") {
    $('#loadstatus > li').html('<img src="./uploads/'+file+'" alt="" /><br />').addClass('success');
} else{
    $('#loadstatus > li').text(file).addClass('error');
}