Lo logre
......................Gracias a todos en especial a emprear me sirvió mucho tu ejemplo y si te fijas bien en el formulario tiene onSubmit="iniciar();" que muestra el gif.
Bueno les dejo el código completo funcionando y de nuevo muchas gracias
La Página principal
Código HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo de subida</title>
<script>
function iniciar(){
document.getElementById('carga').style.visibility = 'visible';
}
function detener(valor){
if(valor == 'stop'){
document.getElementById('carga').style.visibility = 'hidden';
}
}
</script>
<style type="text/css">
#carga{
visibility:hidden;
}
</style>
</head>
<body>
<form name="form1" method="post" action="archivos.php" enctype="multipart/form-data" target="la_otra_pagina" onSubmit="iniciar();">
<table width="50%" border="0">
<tr>
<td>Nombre:</td>
<td><input type="text" name="txtNombre" id="textfield"></td>
</tr>
<tr>
<td>Foto:</td>
<td>
<input type="file" name="txtFoto" id="fileField"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="mostrar"></td>
</tr>
</table>
</form>
<div id="carga"><img id="cargando" src="load.gif" width="220" height="19" alt="load"></div>
<iframe name="la_otra_pagina" src="archivos.php" frameborder="0"></iframe>
</body>
</html> El código]de archivos.php
Código PHP:
if($_POST)
{
$nombre = $_POST['txtNombre'];
$nombre_archivo = $_FILES['txtFoto']['name'];
$origen = $_FILES['txtFoto']['tmp_name'];
$destino = "subidas/".$nombre_archivo;
if(move_uploaded_file($origen,$destino))
{
echo '
<script>
parent.detener("stop");
</script>
';
}
}