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…?