Comunidad de diseño web y desarrollo en internet online

Ajax y formularios

Citar            
MensajeEscrito el 28 Ago 2007 07:56 am
Hola,

estoy intentando pasar por Post un fichero .zip a un script php. En esto no tengo problema, consigo subir el fichero y ver su contenido con el php, pero mi problema es el siguiente:

La aplicación web donde lo estoy implementando, tiene una capa menú (div) y una capa contenido. Cuando selecciono alguna opción de menú, con ajax inserto en la capa contenido la opción de menú que me interesa, en el caso de la subida del fichero .zip, una capa con un formulario con el enctype="multipart/form-data".

El caso es que al darle al botón de enviar, me redirige a la página indicada en el action y sale de la aplicación para mostrarme en una página en blanco el resultado del script.

¿Como puedo hacer para que al darle a enviar el resultado de la ejecución del script aparezca en la capa contenido?. El código js que carga las capas es:

-------------------------------------------------------------------------
function cambiaPagina (url, id_contenedor) {
var pagina_requerida = false;
if (window.XMLHttpRequest) {
// Si es Mozilla, Safari etc
pagina_requerida = new XMLHttpRequest ();
} else if (window.ActiveXObject) {
// pero si es IE
try {
pagina_requerida = new ActiveXObject ("Msxml2.XMLHTTP");
} catch (e) {
// en caso que sea una versión antigua
try {
pagina_requerida = new ActiveXObject ("Microsoft.XMLHTTP");
} catch (e) {
}
}
} else
return false;

pagina_requerida.onreadystatechange = function () {
// función de respuesta
cargarPagina (pagina_requerida, id_contenedor);
}

pagina_requerida.open ('GET', url, true); // asignamos los métodos open y send
pagina_requerida.send (null);
}

// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarPagina (pagina_requerida, id_contenedor) {
if (pagina_requerida.readyState == 4 && (pagina_requerida.status == 200 || window.location.href.indexOf ("http") == - 1))
document.getElementById (id_contenedor).innerHTML = pagina_requerida.responseText;
}
-------------------------------------------------------------------------

El formulario:

-------------------------------------------------------------------------
<form action="php/zip.php" enctype="multipart/form-data" method="POST">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40%">
Seleccione un fichero ZIP para enviar
</td>
<td width="60%">
<input type="file" name="fichero" />
</td>
</tr>
<tr height="5"><td width="100%" colspan="2"></td></tr>
<tr>
<td width="40%"></td>
<td width="60%">
<input type="submit" value="Enviar" />
</td>
</tr>
</table>
</form>
-------------------------------------------------------------------------

El php con el script de tratamiento del zip:

-------------------------------------------------------------------------
<?php
require("gestionBD.php");
$miConexion = new GestionBD;
$miConexion -> conectar ();
$zip = zip_open($_FILES["fichero"]["tmp_name"]);

if ($zip) {
while ($zip_entry = zip_read($zip)) {
if (zip_entry_open($zip, $zip_entry, "r")) {
$imagen = zip_entry_read($zip_entry, zip_entry_filesize($zip_entry));
$imagen = addslashes($imagen);
$nombre = zip_entry_name($zip_entry);
$tamanio = zip_entry_filesize($zip_entry);
$propietario = "null";
$ancho = 1024;
$alto = 768;
$descripcion = "null";
zip_entry_close($zip_entry);

$query = "INSERT INTO imagenes (nombre,tamanio,imagen,propietario,ancho,alto,descripcion) VALUES ('" . $nombre . "','" . $tamanio . "','" . $imagen . "','" . $propietario . "','" . $ancho . "','" . $alto . "','" . $descripcion . "')";
$miConexion -> ejecutaSQL ($query);
if ($miConexion -> Errno == 0) {
echo "La inserción se ha realizado correctamente <br>";
}
}
}
} else {
echo "No existe el fichero indicado";
}

zip_close($zip);
$miConexion -> desconectar ();
?>
-------------------------------------------------------------------------

Y mi index.php:

-------------------------------------------------------------------------
<html>
<head>
<title>Comunidad Pichincha</title>

<!-- HOJAS DE ESTILO -->
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/menu.css">

<!-- FUNCIONES JS -->
<script language="JavaScript" src="js/prototype.js" type="text/javascript"></script>
<script language="JavaScript" src="js/funciones.js" type="text/javascript"></script>
<script language="JavaScript" src="js/menu_JS.js" type="text/javascript"></script>
<script language="JavaScript" src="js/menu_A.js" type="text/javascript"></script>
<script language="JavaScript" src="js/menu_B.js" type="text/javascript"></script>
<script language="JavaScript" src="js/menu_C.js" type="text/javascript"></script>
<script type="text/javascript">
var menu = null;
var elementosA = 0;
var elementosB = 0;
var elementosC = 0;
</script>
</head>

<body>
<!-- CAPA PRINCIPAL -->
<div id="capota">

<!-- CAPA LADO IZQUIERDO -->
<div id="capaLadoI"></div>

<!-- CAPA CENTRAL -->
<div id="capaCentro">

<!-- CAPA CABECERA -->
<div id="capaCab"></div>

<!-- CAPA CUERPO -->
<div id="capaCuerpo">

<!-- CAPA MENU -->
<div id="capaMenu">
<div id="cuerpo">
<?php include ("php/menu.php");?>
</div>
</div>

<!-- CAPA MOVER MENU -->
<div id="capaMover" onclick="mover();" class="txtEnlace"></div>

<!-- CAPA CONTENIDO WEB -->
<div id="capaContenido"></div>
</div>
</div>

<!-- CAPA LADO DERECHO -->
<div id="capaLadoD"></div>
</div>
</body>
</html>
-------------------------------------------------------------------------

Un saludo y muchas gracias.

Por borix69

0 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 26 Sep 2007 02:48 pm
no entender

Por Lord Zorel

17 de clabLevel



 

Chile

firefox
Citar            
MensajeEscrito el 26 Sep 2007 04:23 pm
Lo único que haces con ajax es enviar los datos de forma asíncrona, y es correcto que tu script.php procese los datos, por lo tanto el action del form es correcto, pero si no quieres que redireccione a ese script.php cancela el evento "submit" del formulario.

Script.... DONE, ok! -->

return false;

ten en cuenta que return false cancela el evento si está en el ámbito correcto, por ejemplo:

myForm.onsubmit = function(){
doAjaxStuff();
return false;
}

Por frenadoll

922 de clabLevel

6 tutoriales

Genero:Masculino  

Barcelona

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.