subir archivos al servidor con ajax

[luicos]

Tengo una duda que a ver si me la resolveis o me orientais un poco.

¿Un input type file de un formulario se puede enviar a traves de ajax a una pagina php que lo suba al servidor, y despues muestre un mensaje de "archivo guardado" en la pagina del formulario sin recargar esta pagina?

Porque he estado probando, y con campos de texto si que me deja pero con un input type file no.

Para solucionar esto he visto que se carga el mensaje un un iframe o algo así, pero ¿Se recarga la pagina, porque si es así no me vale?

Espero vuestras opiniones.Gracias

[caricatos]

Hola luicos, bienvenido a los foros :

En las FAQs puse la respuesta, y es "no se puede", al menos con un objeto Ajax (ya sabes, XMLHttpRequest), ya que no acepta la cabecera multipart/form-data, que es lo que se usa con los campos file... además, los datos del contenido del fichero tampoco lo podrías obtener, ya que los envíos son del tipo variable=contenido, y la parte del contenido del fichero es imposible obtenerlo por razones de seguridad...

Los sistemas que simulan Ajax, usan un iframe oculto (o disimilado), y un formulario clásico de envío con adjuntos, y al enviarse a un iframe, lo único que se recarga es el ídem.

Saludos

[luicos]

Es que yo lo que quiero hacer es una pagina que tenga varios formularios, y que se pueda interactuar con ellos de forma independiente, es decir, que solo me recarge una parte y no toda la pagina.

Te explico, tengo un combobox que carga nombres y apellidos de una base de datos, y al escoger uno me carga todos sus datos en una tabla. Esto lo hago con ajax.

Pero mas abajo tengo un formulario que me permite adjuntar un archivo con type file, luego lo subo al servidor y guardo la ruta en otra tabla independiente de la de usuarios.

Lo que pretendia era adjuntar el archivo a traves de este formulario y que me sacase un mensaje de "archivo guardado" debajo del formulario pero sin que recargase toda la pagina, porque si tengo en el combo de arriba seleccionado un usuario, no me lo puede cambiar.

¿Como puedo hacer esto? Es que si no lo puedo hacer así, mi proyecto se me va a complicar.

Adjunto enlace de como se podría hacer para que me digais si es correcto.
http://cabezaderaton.com.ar/ajax-file-upload/
Gracias

[hector2c]

se puede subir ficheros mediante ajax, con jquery y el plugin AjaxFileUpload-Demo, lo uso desde hace mucho, y me va muy bien...

[caricatos]

Iniciado por hector2c

se puede subir ficheros mediante ajax, con jquery y el plugin AjaxFileUpload-Demo, lo uso desde hace mucho, y me va muy bien...

Hola:

Todas las librerías tienen rutinas para subir ficheros, y aunque dicen que usan Ajax, tal como dije antes, usan un iframe oculto...

... además, no es necesario cargar una librería completa para subir archivos...

Saludos

[hschimpf]

Iniciado por luicos

Lo que pretendia era adjuntar el archivo a traves de este formulario y que me sacase un mensaje de "archivo guardado" debajo del formulario pero sin que recargase toda la pagina, ...

Mira luicos, lo que puedes realizar es, como ya te han comentado, en tu formulario que deseas agregar el <input type='file'>, colocar este en un iframe de la siguiente manera:

Código HTML:

...
<IFRAME id='frameArchivo'>
   <FORM action='fichero.php' method='POST' enctype='multipart/form-data' id='formArchivo'>
      <INPUT type='hidden' name='codCombo' id='codCombo'>
      <INPUT type='file' name='archivo'
   </FORM>
</IFRAME>
<DIV id='mensajeResultado'></DIV>
 

El campo hidden es para que almacenes el codigo del combo ya que de alguna forma debes identificar para que registro es el fichero que estas subiendo. El DIV debajo del frame es donde se mostraran los mensajes.
Tu archivo PHP luego de procesar el fichero subido deberia tener una linea como esta para mostrar el mensaje:

Código PHP:

...
echo '<SCRIPT languaje=\'javascript\'>parent.getElementById("mensajeResultado").innerHTML = "Mensaje a mostrar..";</SCRIPT>';
...
 

Yo realice ese procedimiento para un sistema que desarrolle. Si lo quieres probar esta en http://alquiler.gschimpf.com. Debes registrarte como usuario nuevo y crear un anuncio.
Cualquier consulta es bienvenida.
Suerte!

[caricatos]

Iniciado por hschimpf

Mira luicos, lo que puedes realizar es, como ya te han comentado, en tu formulario que deseas agregar el <input type='file'>, colocar este en un iframe de la siguiente manera:
...
<IFRAME id='frameArchivo'>
<FORM action='fichero.php' method='POST' enctype='multipart/form-data' id='formArchivo'>
<INPUT type='hidden' name='codCombo' id='codCombo'>
<INPUT type='file' name='archivo'
</FORM>
</IFRAME>
...

Hola:

Dentro de un iframe, no se puede poner nada... ¿En qué navegador has probado/usado ese código...?

Saludos

[hschimpf]

Iniciado por caricatos

Dentro de un iframe, no se puede poner nada... ¿En qué navegador has probado/usado ese código...?

Perdon, tienes razon. Escribi el codigo de lo que me acordaba. Ahora revise el sistema y es asi como lo hice:

Código HTML:

<FORM action='fichero.php' method='POST' enctype='multipart/form-data' id='formArchivo' target='iframeUpload'>
   <INPUT type='hidden' name='codCombo' id='codCombo'>
   <INPUT type='file' name='archivo'>
</FORM>
<IFRAME id='iframeUpload' name='iframeUpload' style='display: none;'></IFRAME>
<DIV id='mensajeResultado'></DIV>
 

Luego desde javascript envio el formulario:

Código Javascript:

document.getElementById('fomrArchivo').submit();
 

Gracias por la observacion!

[luicos]

Gracias por vuestros apoyos. Para ser nuevo en el foro no me puedo quejar de la ayuda prestada.

Voy a hacer pruebas y luego ya os comento

Un saludo

[luicos]

Hola de nuevo, he probado el codigo y no me funciona
en el formulario tengo esto:

Código HTML:

<form action="php_plantillas.php" method="post" enctype="multipart/form-data" id="frplantilla" target="iframeUpload">													
<img src="http://www.forosdelweb.com/f77/Images/eng.png" border=0 align="absbottom"></img>&nbsp;
<font size="1"><u><b>ENGADIR PLANTILLA A TIPOS DE PROBAS</b></u>
<p>									
<b>• Plantilla:</b> <input type="file" name="plantilla">													
<p>
<div>
<input  type="submit" name="engadir" value="Engadir">
</div>
</font>
</form>
<iframe id="iframeUpload" name="iframeUpload" style="display:none;"></iframe>
<div id="mensajeResultado"></div> 

y en el php tengo esto:

Código PHP:

  <?php
    if ($_FILES [ 'plantilla' ][ 'name' ] != '') 
        {    
            //COMPROBAR SI EXISTE ESE NOMBRE EN LA BD
            $stado = false;
            include "../conexion.php";                                            
            $sql4="SELECT nomeplantilla FROM plantillaspsic";
              $result4=mysql_query($sql4,$conexion) or die(mysql_error());
            $minusculas = strtolower($_FILES [ 'plantilla' ][ 'name' ]);
            while ($row = mysql_fetch_row($result4))
                {
                    if (utf8_decode($row[0]) == $minusculas)
                        {    
                        $stado = true;                                                                                                                                                                    
                        }
                }
                                                                
            if ($stado == true)
                {
                    include "../cerrar_conexion.php";
                    echo "<script languaje='Javascript'>
                    parent.getElementById('mensajeResultado').innerHTML = 'Este nombre de plantilla ya existe en la B.D.';</script>";                    
                }
            else
                {                                                        
                    /////////////////////////////////////////////////////////////
                    // SUBIR PLANTILLA PRUEBAS PSICO al SERVIDOR ///////
                    /////////////////////////////////////////////////////////////
                    $destinoplant = 'plantillas_ps';                                                                   
                    $archivosin = str_replace(" ", "", $minusculas);                                                                                                                                                                                            
                    move_uploaded_file ( $_FILES [ 'plantilla' ][ 'tmp_name' ], $destinoplant . '/' . $archivosin );                                                                                    
                    // $rutap-> variable donde se almacena la ruta para guardar en MYSQL
                    $rutap = $destinoplant . '/' . $minusculas;
                    $rutapsin = str_replace(" ", "", $rutap); // quitar espacios en blanco
                    $rutapsin2=utf8_encode($rutapsin);                                                                    
                    $nomep = utf8_encode($minusculas);
                    ////////////////////////////// La BD ya está abierta                                                                                                                  
                    $sql5=" INSERT INTO plantillaspsic (nomeplantilla, rutaplantilla) VALUES ('$nomep','$rutapsin2') ";
                      $result5=mysql_query($sql5,$conexion) or die(mysql_error());                
                    include "../cerrar_conexion.php";    
                    echo "<script languaje='Javascript'>
                    parent.getElementById('mensajeResultado').innerHTML = 'Plantilla guardada en la B.D.';</script>";                }                                                                        
        }                                                                
?>   

¿Que es lo que está pasando, porque no me muestra ningun resultado?
Parece como si no recibiera el valor del input type file
¿Que opinais?

[caricatos]

Hola:

Mira este artículo; Revisar las imágenes antes de subirlas, es sobre un tema muy recurrente, y muy parecido al que planteas, pero con imágenes.

Los pasos son estos... un formulario con los parámetros que ya tienes (target, enctype y method), luego el iframe que también tienes, pero en el iframe creo que no lo planteas como un documernto html, y así tal vez no se devuelvan bien los resultados...

Otra cosa importante es que parent es un objeto del tipo window, y getElementById es un método del objeto document...

<html>
<body onload="parent.document.getElementById(...)"

Saludos

[luicos]

¿A que te refieres con que el iframe no lo planteo como un documento html?
No podías ser un poco más concreto, es que no controlo mucho de ajax y no se que cambiar en el codigo.

¿Tengo que poner en la pagina php las etiquetas de html o que?¿Y que es eso del onload, un ejemplo?
NOTA: La pagina en la que tengo el formulario es php, porque tiene codigo php que utilizo para otras cosas y no la puedo poner html, si es eso lo que me quieres decir

Saludos

[caricatos]

Hola:

¡Exacto!... como no usas un objeto Ajax, no se programa el evento readystate, y para recibir la conformación, hay que usar javascript en el iframe... o sea poner lo mínimo...
<html>
<body onload="parent.alert('Ok')" ></body>
</html>

Claro que una alerta se puede hacer también desde el mismo iframe, pero normalmente hay que hacer algunos ajuistes adicionales...

Saludos

[luicos]

Ya he conseguido que me funcione. El problema estaba en el

Código:

parent.document.getElementById ('mensaje')

, que resulta que no le pusiera el documente entre parent y getElementById.

Despistes, que le vamos a hacer,

Mira caricatos, una ultima cuestion. ¿como puedo hacer para adornarlo con un cargando... + gif animado, mientras no me saca el mensaje?

Ahh... Este método de iframes se puede aplicar tambien a elementos de un formulario tales como campos de texto, text areas, combos y listas. Es decir, se pueden enviar datos a una pagina php, y devolver un mensaje a la pagina del formulario sin recargarla en su totalidad??

[caricatos]

Hola:

Me alegro que alfin lo arreglaras... y la respuesta de usar el sistema con otras cosas como textos y elementos de formularios, si que es cierto, pero también con los objetoss Ajax normales, y de esa manera, por ejemplo, puedes validar en dtd estricto (tal vez eso no te importa... la verdad es que ami tampoco me han importado nunca...)

Y sobre lo de "cargando..." es relativamente fácil, aunque yo prefiero un gif animado... tenerlo oculto, al enviar el form mostrarlo, y con la respuesta volverlo a ocultar... te propongo que lo intentes. Seguro que lo consigues...

Por cierto, en el artículo que te puse, hay un enlace de ejemplo... ese mismo fichero terminado en php tiene ese efecto: Formulario (chequeo de imágenes)


Saludos

[luicos]

Hola caricatos. No he conseguido crear el gif animado.Es que el javascript no lo controlo
¿Me pregunto si me puedes indicar el codigo que tengo que poner, explicado claro, si no es mucha molestia?

Gracias

[Brahyam]

Hola luicos

He venido leyendo el post, y te puedo dar una solucion que la he venido haciendo por mucho tiempo para hacer lo que quieres.

Cuando le das al boton para que envie el archivo, podrias hacer esto:

en el HTML

Código HTML:

<input  type="button" name="engadir" onclick="subirArchivo()" value="Engadir"> 

haces una funcion javascript entre las etiquetas HEAD

Código HTML:

function subirArchivo(){
    document.getElementById('mensajeResultado').innerHTML = '<center><img src="imagen_cargando.gif" border="0" /></center>';
    document.getElementById('frplantilla').submit();
}

Lo que esto hace es que cuando le das click a tu boton, el atributo "innerHTML" le inserta dentro del div "mensajeResultado" la imagen de cargando, seguido del envio de la imagen al servidor, cuando se ha subido y todo ha salido ok, haces un echo con 'Plantilla guardada en la B.D.' y ahi le dices de nuevo que ese mensaje lo ponga dentro del div "mensajeResultado" con el atributo "innerHTML" lo que te reemplazaria la imagen de cargando que le habias puesto por tu mensaje.
Asi con esto mientras la imagen esta subiendo esta la imagen de cargando y cuando sube el archivo sale tu mensaje, todo esto en tiempo real.

Espero que te sirva.

[luicos]

Voy a probarlo, lo que pasa es que en el formulario el boton no es un button sino un submit
Será lo mismo no?

[luicos]

Genial, esto me funciona, pero hay un problema y es la validación.
La validacion la tengo asi: onsubmit= "return validacion(this)", y aqui lo que me hace es validar, luego me saca el mensaje de alert, con el gif visualizado, y al aceptar el alert me guarda un archivo de formato diferente al que quiero subir, porque el la funcion subirArchivo(), tengo despues del gif el submit para enviar el formulario.

¿Que solucion tengo aquí?

[luicos]

Ya lo he solucionado. Solo hay que quitar el document.getElementById('frplantilla').submit(); de la funcion subirArchivo() y ya no envia.

En lugar del button tengo un submit en el formulario, que es el que envia

Gracias a todos por vuestra colaboracion y ayuda

Saludos y hasta otra

[hlpupo]

Hola a todos estoy presentando el mismo problema no se como subir imagenes al servidor usado ajax, necesito ayuda urgente