Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Actualización de divs en respuesta ajax

Estas en el tema de Actualización de divs en respuesta ajax en el foro de Frameworks JS en Foros del Web. Hola hola. Después de haber estado dándo bastantes vueltas y buscando por todos lados no consigo hacer funcionar un formulario de subida de 11 imagenes ...
  #1 (permalink)  
Antiguo 08/02/2009, 05:32
 
Fecha de Ingreso: febrero-2009
Mensajes: 4
Antigüedad: 15 años, 3 meses
Puntos: 0
Actualización de divs en respuesta ajax

Hola hola.

Después de haber estado dándo bastantes vueltas y buscando por todos lados no consigo hacer funcionar un formulario de subida de 11 imagenes y que al subirlas al servidor, muestre las imagenes y rellene unos campos no editables de otro formulario.

El caso es que, después de subir las imágenes no recarga bien, es decir no muestra las 11 imagenes, sólo muestra algunas y sólo recarga un campo de otro formulario. Sin embargo cuando veo alguna de las imágenes (boton derecho ver imágen) y luego vuelvo atrás al formulario otra vez, si que actualiza todo.

A ver si me podéis dar alguna idea.

Un saludo.
  #2 (permalink)  
Antiguo 08/02/2009, 15:45
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 1 mes
Puntos: 1284
Respuesta: Actualización de divs en respuesta ajax

Hola aireeria, bienvenido a los foros :

No sé como haces la subida y muestras esas imágenes, pero te paso un artículo: Revisar las imágenes antes de subirlas

Según hagas las cosas serán las respuestas, así que tal vez sea mejor que pongas el código que usas.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 09/02/2009, 03:41
 
Fecha de Ingreso: febrero-2009
Mensajes: 4
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Actualización de divs en respuesta ajax

Gracias por responder caricatos.

Voy a pegar el código.

El formulario de subida:
Código HTML:
<div>
		  <table width="346" bordercolor="#000000" bgcolor="#ffffff">
		    <form id="uploadform" action="process_upload.php" method="post" enctype="multipart/form-data" target="uploadframe">
            <tr>
              <td colspan="3" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><div align="center">Fotos</div></td>
            </tr>
            <tr>
              <td width="98" bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto portada: </div></td>
              <td width="231" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img0" name="trab_img0"/></td>
              <td width="1" bordercolor="#FFFFFF" bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
			<tr>
              <td width="98" bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto video: </div></td>
              <td width="231" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img11" name="trab_img11"/></td>
              <td width="1" bordercolor="#FFFFFF" bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
            <tr>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 1:</div></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img1" name="trab_img1"/></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
            <tr>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 2: </div></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img2" name="trab_img2"/></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
            <tr>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 3: </div></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img3" name="trab_img3"/></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
            <tr>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 4: </div></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img4" name="trab_img4"/></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
            <tr>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 5: </div></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img5" name="trab_img5"/></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
            <tr>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 6: </div></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img6" name="trab_img6"/></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
            <tr>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 7: </div></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img7" name="trab_img7"/></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
            <tr>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 8: </div></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img8" name="trab_img8"/></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
            <tr>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 9: </div></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img9" name="trab_img9"/></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
            <tr>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><div align="right">Foto 10: </div></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><input type="file" id="trab_img10" name="trab_img10"/></td>
              <td bordercolor="#FFFFFF" bgcolor="#FFFFFF">&nbsp;</td>
            </tr>
            <tr>
              <th colspan="3" bordercolor="#FFFFFF" bgcolor="#FFFFFF" scope="row"><input type="submit" value="Subir" onClick="uploadimg(document.getElementById('uploadform')); return false;" />
			  <iframe id="uploadframe" name="uploadframe" src="process_upload.php" style="display:none"></iframe></th>
              </tr>
			 </form>
          </table>
		  <div id="imagenes" style="width:300px float:right">
		  <div id="estado"></div>
		  <table width="346" bordercolor="#000000" bgcolor="#ffffff" border="1">
		  	<tr><th bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg0" style="float:left"></div></th>
			<td bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg1" style="float:right"></div></td></tr>
			<tr><th bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg2" style="float:left"></div></th>
			<td bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg3" style="float:right"></div></td></tr>
			<tr><th bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg4" style="float:left"></div></th>
			<td bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg5" style="float:right"></div></td></tr>
			<tr><th bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg6" style="float:left"></div></th>
			<td bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg7" style="float:right"></div></td></tr>
			<tr><th bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg8" style="float:left"></div></th>
			<td bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg9" style="float:right"></div></td></tr>
			<tr><th bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg10" style="float:left"></div></th>
			<td bordercolor="#000000" bgcolor="#ffffff" border="1" width="20%"><div id="showimg11" style="float:right"></div></td></tr>
			</table>
			</div>
		</div> 
El javscript:

//xmlhttp.js

//Función para crear un objeto XMLHttp
Código:
function getxmlhttp(){
	//Crear una variable de Bool para comprobar si se puede utilizar una iinstancia 
	//ActiveX de Microsoft.
	var xmlhttp = false;
	
	//Comprobar si se está utilizando Internet Explorer.
	try{
		//Si la versión de javascript es superior a la 5
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
		//Si no, utilizar el objeto ActiveX tradicional.
		try{
			//Si se está utilizando Internet Explorer
			xmlhttp = new ActiveXObject("Microsoft.	XMLHTTP");
		}catch(E){
			//En caso contrario9 no de3be estarse utilizando Internet Explorer
			xmlhttp = false;
		}
	}
	//Si no se está utilizando Internet Explorer, crear una instancia Javascript
	//del objeto.
	if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}

//Función para procesar un XMLHttpRequest.
function processajax (obj, serverPage){
	//Obtener el objeto XMLHttpRequest a utilizar.
	var theimg;
	xmlhttp = getxmlhttp();
	xmlhttp.open("GET", serverPage,true);
	xmlhttp.onreadystatechange = function (){
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				document.getElementById(obj).innerHTML = xmlhttp.responseText;
			}
	}
	xmlhttp.send(null);
}
Código:
// functions.js
function uploadimg(theform){
	//Enviar el formulario.
	theform.submit();
	//Mostrar el mensaje de carga al usuario.
	setStatus ("Loading...","estado");
}

//Función para determinar cuándo ha concluido la ejecución de process_upload.php.
function doneloading(theframe,thefile,thediv){
	var theloc = "showimg.php?thefile=" + thefile
	theframe.processajax ("showimg" + thediv,theloc);
	showfield (theframe,thefile,thediv);
}

//Función para establecer el estado de carga.
function setStatus (theStatus, theObj){
	obj = document.getElementById(theObj);
	if(obj){
		obj.innerHTML = "<div class=\"bold\">" + theStatus + "</div>";
	}
}

function showfield(theframe,thefile,thediv){
	var thefield = "showfield.php?thefile=" + thefile +"&thediv=" + thediv
	theframe.processajax ("field" + thediv,thefield);
	
}
Y ahora pongo el proceso de subida y de muestra.
  #4 (permalink)  
Antiguo 09/02/2009, 04:04
 
Fecha de Ingreso: febrero-2009
Mensajes: 4
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Actualización de divs en respuesta ajax

Proceso de subida:

Código PHP:
<?php
    
//process_upload.php
    //Tipos MIME de archivos permitidos.
    
$allowedtypes = array ("image/jpeg","image/pjpeg","image/png","image/gif");
    
//Dónde queremos guardar el archivo.
    
$savefolder "imagenes/temp";
    for(
$i=0$i 11$i++){
        
//Si tenemos un archivo válido
        
$archivo 'trab_img'.$i;
        if(isset(
$_FILES[$archivo])){
            
//Entonces tenemos que confirmar que es de uno de los tipos que queremos
            
if(in_array($_FILES[$archivo]['type'],$allowedtypes)){
                if (
$_FILES[$archivo]['error'] == 0){
                    
$thefile $savefolder "/" $_FILES[$archivo]['name'];
                    if(!
move_uploaded_file ($_FILES[$archivo]['tmp_name'], $thefile)){
                        echo 
"Ha habido un error subiendo el archivo.";
                    }else{
                        
//Indicar al padre que cargue la imagen
                        
?>
                        
                        <head>
                        <script type="text/javascript" src="js/functions.js"></script>
                        </head>
                        <body>
                            <img src="<?=$thefile?>" onload="doneloading (parent,'<?=$thefile?>','<?=$i?>')"/>
                        </body>
                        </html>
                        <?php
                    
}
                }
            }
        }
    }
?>
Mostrar las imagenes y rellenar los campos de otro formulario.

Código PHP:
<?php

//showfield.php

//Comprobar si existe la imagen.
if(is_file ($_GET['thefile']) && file_exists ($_GET['thefile'])){
?>
<input type="text" id="<?php echo "trab_img".$_GET['thediv']?>" name="<?php echo "trab_img".$_GET['thediv']?>" size="100%" value="<?=$_GET['thefile']?>" READONLY>
<?php
}
?>
Código PHP:
<?php

//showimg.php

//Comprobar si existe la imagen.
if(is_file ($_GET['thefile']) && file_exists ($_GET['thefile'])){
?>
<img src="<?=$_GET['thefile']?>" alt="" />
<?php
}
?>
Con todo esto firefox no muestra las imágenes y solo rellena el último campo correspondiente a la última imagen que le he puesto a subir, pero si que sube todas las imagenes al servidor. Si intento introducir eso a mi bd como todavía no he desarrollado esa parte, me dice que no puede y al darle a atrás si que están rellenos todos los campos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:56.