show uploading file animated icon like yahoo

[vinpkl]

hi all

 

i have a form that uploads the image. Till the file get uploaded i want to show an uploading animated icon adjacent to input type file field to show user that the uploading is in progress. when uploading finishes it should disappear.

 

i dont want to go for progress bar as its not an easy task.

 

<?php require_once("../config.php");

$msg="";
if(isset($_REQUEST['submit']))
{
$loc=$_REQUEST['banner_loc'];
$path=$_FILES['banner_image']['name'];
move_uploaded_file($_FILES['banner_image']['tmp_name'], "../graphics/" . $_FILES['banner_image']['name']);

$qry="insert into banners_homepage(location,banner_image) values('$loc', '$path')";

if(mysql_query($qry))
$msg="Banner Inserted successfully";
else
$msg="Error Inserting Banner";
}

?>

 

<input type="file" name="banner_image" id="banner_image" size="60" />

 

vineet

[gevans]

Have you looked into using javasctipy

I used to have a hidden dive that was fixed to the height and width of the screen with an image in the middle, all transparent

 

When they hit sumbit the div gets unhidden and the user is unable to access the page

[vinpkl]

Have you looked into using javasctipy

I used to have a hidden dive that was fixed to the height and width of the screen with an image in the middle, all transparent

 

When they hit sumbit the div gets unhidden and the user is unable to access the page

 

hi gevan

 

that is also good idea.

but how will the div know that the image has been uploaded and it can become hidden again.

 

vineet

[PFMaBiSmAd]

 

You need to use AJAX to get the status from the server to alter what the upload indicator is doing -

http://www.ajaxf1.com/product/ajax-file-upload.html

[vinpkl]

 

You need to use AJAX to get the status from the server to alter what the upload indicator is doing -

http://www.ajaxf1.com/product/ajax-file-upload.html

 

hi PFM

 

thanks. i got the idea from there.

 

vineet

[vinpkl]

hi PFM

 

i need a little help. i m using the script from the url that u gave

 

<script language="javascript" type="text/javascript">
function startUpload(){
     document.getElementById('f1_upload_process').style.visibility = 'visible';
      document.getElementById('f1_upload_form').style.visibility = 'hidden';
      return true;
}

function stopUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!</span>';
      }
      else {
         result = '<span class="emsg">There was an error. !</span>';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      document.getElementById('f1_upload_form').innerHTML = result;
document.getElementById('f1_upload_form').style.visibility = 'visible';      
          return true;   
}
</script>

 

This code give me error "object expected on line 23" in status bar in IE7.

 

I dont get any error in Firefox or opera.

 

do i need to change anything acording to Internet Explorer. Or how switch off this error.

 

This is the line where i get error

document.getElementById('f1_upload_process').style.visibility = 'hidden';

 

vineet

[PFMaBiSmAd]

The sample code from that link works for me in IE7.

 

The code expects a form element with an id of f1_upload_process. IE reports the error when the element does not exist, while the other two browsers ignore it.

[vinpkl]

The sample code from that link works for me in IE7.

 

The code expects a form element with an id of f1_upload_process. IE reports the error when the element does not exist, while the other two browsers ignore it.

 

hi PFM

 

I wanted to edit this code but the forum said that you limit exceeded.

 

so here is what i found. This was also part of code. If i write this line

<script language="javascript" type="text/javascript">
window.top.window.stopUpload(<?php echo $result; ?>);
</script> 

 

then i receive error otherwise not.

 

do IE7 doesnt recognise window

 

vineet