[JQuery] Problema con formulario multipart/form-data

Leunamal · #1 (**permalink**) 30/07/2009, 04:28

Buenas.

Os comento mi problema por si a alguien más le ha ocurrido:

Tengo un formulario con varios campos de texto y 2 input text para insertar una imágen y un fichero. Si manejo el formulario sin usar jquery funciona todo perfecto. Sin embargo, con jquery tengo un problemilla. Este formulario está en una página cargada dinámicamente, el formulario se muestra bien, sin embargo, cuando le doy al submit y recibo una respuesta la página de la respuesta me ocupa toda la página y no la zona de carga de contenido dinámico.

Esto me ocurre porque comenté el evento click del sumbit ya que si no lo hacía tenía un error diciendome que envio el formulario sin multipart/form-dat.

Probé hacer esto:

Código:

$("#submit").click(function(e){
		var respuestsa = $.ajax({
			success: ProcesaResp,
			failure: error
		});
		return false;
	});

function ProcesaResp(responseText) {
		responseText = jQuery.trim(responseText);
		$('#content').html(responseText);

	}

Pero en vez de aparecer la respuesta del formulario, se me carga la página principal dentro del div "#content".

¿Alguien sabe como arreglar esto?

Saludos

emiliodeg · #2 (**permalink**) 30/07/2009, 09:20

con ajax no se puede enviar archivos!

Leunamal · #3 (**permalink**) 30/07/2009, 09:35

Cita:

Iniciado por emiliodeg

con ajax no se puede enviar archivos!

Hola, yaya. Lo que realmente me interesa es obtener la respuesta no subirlos. Yo los ficheros los envio con fileupload. Pero me gustaría obtener el mensaje de respuesta para mostrarlo.

El problema que tengo actualmente es que subo todo, y me sale un mensaje de confirmación de que todo se ha hecho correctamente pero me sale en toda la página y no en la zona del contenido dinámico.

No sé porque no permitieron hacer esto. Buscando en páginas del extranjero encontré el plugin jquery.mpAjax. Lo he puesto en mi código pero no me funciona. Algo estaré haciendo mal o habré entenido mal su uso.

Saludos

Leunamal · #4 (**permalink**) 30/07/2009, 13:55

Bueno, ya he conseguido arreglar esto y funciona perfectamente. La clave estaba en usar un iframe oculto. Lo averigüé gracias a este manual:
http://www.desarrolloweb.com/articul...le-upload.html

Venía explicado para php, pero yo lo adapté para jsp. Tan sólo tenía que cambiar los echo de php por el out.println de jsp. El código lo modifiqué para utilizar mejor jquery ya que facilita las cosas.

El código del formulario (el del ejemplo que seguí) es este:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<title>Ajax File Upload - Formulario</title>
	<link rev="made" href="mailto:[email protected]" />
	<link rel="shortcut icon" href="../favicon.ico" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>


<script type="text/javascript">
	function resultadoUpload(estado, file) {

	var link = '<br /><br /><a href="upload3.php">Subir Archivo</a> - <a href="verArchivos.php">Ver Imagenes</a>';

	if (estado == 0) var mensaje = 'El Archivo <a href="archs/' + file + '" target="_blank">' + file + '</a> se ha subido al servidor correctamente' + link;
	if (estado == 1) var mensaje = 'Error ! - El Archivo no llego al servdor' + link;
	if (estado == 2) var mensaje = 'Error ! - Solo se permiten Archivos tipo Imagen' + link;
	if (estado == 3) var mensaje = 'Error ! - No se pudo copiar Archivo. Posible problema de permisos en server' + link;

	document.getElementById('formUpload').innerHTML=mensaje;
	}
</script>

<style>
#formUpload {
	width: 600px;
	height: 60px;
	border: 1px solid #aaa;
	background: #EEE;
	padding: 5px;
}

#formUpload input {border: 1px solid #AAA}
</style>

</head>

<body>
<div id="formUpload">
	<form method="post" enctype="multipart/form-data" action="controlUpload3.php" target="iframeUpload">
		Archivo: <input name="fileUpload" type="file" onchange="javascript: submit();" />
		<br /><iframe name="iframeUpload" style="display:none"></iframe>
	</form>
	</body>
</div>

</html>

Una cosa, el target="iframeUpload" del form lo he quitado y lo añado mejor dentro del código de javascript para que así funcione también cuando javascript no esté habilitado.

En el controlUpload3.php hay lineas como estas:

Código:

echo '<script>parent.resultadoUpload (\'3\', \''.$_FILES['fileUpload']['name'].'\');</script>';

Ajustando los parámetros y creando nuevas funciones se puede conseguir lo se quiera.

Espero que le sirva a alguien.

Un saludo

sabigual · #5 (**permalink**) 04/03/2010, 21:13

Aprecio lo que dice Emiliodeg, pero con ajax se puede hacer de todo, al menos yo hago lo siguiente, invoco con ajax, un formulario que es una pag, independiente en si mima, en un div, y lo uso para subir archivo a mi servidor. asi que, habra que ver en que contexto estarias usando dichos algoritmos. por lo demas, siempre existen mil formas de hacer una misma cosa.

mayid · #6 (**permalink**) 05/03/2010, 09:50

Cita:

con ajax no se puede enviar archivos!

Creo que se puede hacer todo, como dice sabeigual.

juaniquillo · #7 (**permalink**) 05/03/2010, 13:08

Hasta donde yo se no se pueden enviar archivos usando ajax solamente (osea, XMLHttpRequest) . Se simula usando flash o iframes:

http://www.miguelmanchego.com/2009/s...o-ajax-jquery/
http://www.openjs.com/articles/ajax/ajax_file_upload/