gif carga mientras sube foto

[vesvello]

partiendo del codigo que encontre en este post:
http://www.forosdelweb.com/f13/gif-c...4/#post2299377
hice las siguientes modificaciones:
Este es el codigo que crearia los input file:

Código HTML:

 <script>
	function ShowFields(x)
	{
		var iFields = parseInt(x.options[x.selectedIndex].value);
		
		var strCode = "";
		
		strCode +="<table border=\"0\" cellspacing=\"8\">";
		
		for(i=0;i<iFields;i++)
		{
			strCode +="<tr>";
  				strCode +="<td>Image "+(i+1)+":</td>";
  				strCode +="<td> <input type=file name=userfile"+(i+1)+"><img id='loading' src='ajaxloader.gif' width='16' height='16' style='display:none' /></td>";
  			strCode +="</tr>";
		}
		
		strCode +="</table>";
		
		document.getElementById("UploadFields").innerHTML = strCode;
		
	}
	</script> 

Este seria el que al onsubmit ejecuaria la funcion loading

Código HTML:

 <form action="index.php" style="margin-top:0px;margin-bottom:0px" method=post name="form2"  ENCTYPE="multipart/form-data"onsubmit="return loading()"> 

Por ultimo la funcion loading que cargaria la imagen gif mientras se carga el archivo:

Código HTML:

<script>
		function loading()
		{
	var images_number = document.getElementById('images_number').value;
	var iPicCounter = document.getElementById('iPicCounter').value;
	var imagenes_subir = images_number - iPicCounter;
	alert (imagenes_subir);
	for (var i=0; i < imagenes_subir; i++)
		{
	if(document.getElementById('userfile'[i]).value.length)document.getElementById('userfile'[i]).style.display='inline'
		}
</script> 

Pero me dice que loading no es una funcion.
No tengo mucha idea de javascript asi que se agradecen sugerencias

[caricatos]

Hola:

Es que tu loading también es el id de un tag que has creado, y algunos navegadores consideran los id's como los propios objetos que referencian...

Incluso parece que puedes generar más de un id igual (cosa no permitida, aunque tal vez cuele...)

Saludos

[vesvello]

He cambiado el nombre de la funcion:

Código HTML:

function Cargarloading()

y

Código HTML:

<form action="index.php" style="margin-top:0px;margin-bottom:0px" method=post name="form2"  ENCTYPE="multipart/form-data" onsubmit="return Cargarloading()"> 

pero ahora me dice que la funcion is no defined

[vesvello]

Era un error de sintaxis, me faltaba por cerrar un }

Pero ahora el problema es el siguiente. Tengo el siguiente codigo dentro de la funcion:

Código HTML:

	for (var i=0; i < images_number; i++)
		{
	if(document.getElementById('userfile[i]').value.length)document.getElementById('userfile[i]').style.display='inline'
		}

El problema esta aqui:

Código HTML:

document.getElementById('userfile[i]

que no se exactamente como seria la sintaxis de 'userfile[i]' para que vaya modificando el id

[caricatos]

Hola:

Si el índice tiene que cambiar, debes sacarlo de la cadena concatenándolo...

"userfile[" + i + "]"

Saludos

[vesvello]

Este es el codigo que tengo pero no me funciona. Se supone que al darle a enviar deberia de cargar una imagen mientras sube el archivo. pero no funciona.

este es el javascript:

Código:

<script>
		function SubmitForm1()
		{
	var images_number = document.getElementById('images_number').value;
	if (images_number ==0)
		{
		}
		else
		{
	for (var i=0; i < images_number; i++)
		{
	var y = "userfile"+(i+1);
	if(document.getElementById('userfile1').value.length) document.getElementById('loading').style.display='inline';
		}
		}
		}

	</script>

este es el html:

Código HTML:

 <form action="index.php" target="pepe" style="margin-top:0px;margin-bottom:0px" method=post name="form2"  ENCTYPE="multipart/form-data" onsubmit="SubmitForm1()">	
	<script>
	function ShowFields(x)
	{
		var iFields = parseInt(x.options[x.selectedIndex].value);
		
		var strCode = "";
		
		strCode +="<table border=\"0\" cellspacing=\"8\">";
		
		for(i=0;i<iFields;i++)
		{
			strCode +="<tr>";
  				strCode +="<td>Image "+(i+1)+":</td>";
  				strCode +="<td> <input type=file id=userfile"+(i+1)+" name=userfile"+(i+1)+"><img id=\"loading\" src=\"ajaxloader.gif\" width=\"16\" height=\"16\" style=\"display:none\" /></td>";
  			strCode +="</tr>";
		}
		
		strCode +="</table>";
		
		document.getElementById("UploadFields").innerHTML = strCode;
		
	}
	</script>
				<select name="images_number"   id="images_number" onChange="ShowFields(this);">
				<?php
				
				
				for($i=0;$i<=($MAX_NUMBER_IMAGES-($iPicCounter+1));$i++)
				{
					echo "<option value=\"".$i."\">".$i."</option>";
				}
				?>
				</select>				
				<br><br>
				
				<div id="UploadFields">
	
				</div>
        <iframe name="pepe" width="1" height="1" style="visibility:hidden"></iframe> 

Otro error que tengo es que se supone que al enviar deberia recargar la misma pagina pero ahora mostrando las nuevas imagenes que se han subido pero hay algun error porque no hace el refresco de la pagina sino que se queda tal y como estaba antes del envio como si aparentemente no hubiera pasado nada... pero sin embargo ejecuto el formulario correctamente porque si salgo de la apgina y regreso de nuevo... si aparecen las nuevas imagenes que he subido.

[caricatos]

Hola:

Si el id no lleva corchetes, no hay que ponerlos luego para las referencias, tan solo se debe sumar el índice a la cadena...

document.getElementById("userfile" + i)...

Y lo de refrescar, según parece el formulario se envía a un iframe oculto... particularmente suelo tener ese iframe visible para ver si funciona bien...

Saludos