Cargar Imagen con ajax.

[rjulio21]

Buenas. Estoy empezando a trabajar con ajax. Y no lo manejo bien aun. Les cuento como va el rollo. Estoy intentando hacer un formulario de carga de proyectos. En el que pueda cargar el nombre del proyecto y una imagen principal, y, deseo con ajax que se ejecute el script php que lo registra en la base de datos. y luego mostrar en la misma página otro formulario...

Todo va bien hasta el momento. No es nada complejo. El problema lo tengo por haberle ingresado al formulario lo de la imagen. ya que al pasar los parametros del form por medio de la funcion ajax. Como que no se envia la imagen como tal. (O realmente no se que es) y no puedo usar la variable "$_FILES" para trabajar la imagen en el script que guarda en la bd.
Alguien que pueda decirme como puedo pasar una imagen para trabajarla con $_FILES?
Aqui pongo los codigos para explicarme mejor.

cargarProyecto.php

Código PHP:

echo "<div id=\"contenido\">
    <h3 class=\"titulo\">Cargar Proyectos</h3>";
 
    $conTipoProy="select * from tipoProyecto;";
    $traerTipoProy=ejecutarQuery($conTipoProy);
    $selectTipo="<select name=\"tp\">";
    while($tipoProyecto=mysql_fetch_array($traerTipoProy)){
        $selectTipo.="<option value=$tipoProyecto[2]>$tipoProyecto[1]</option>";
    }
    $selectTipo.="</select>";
    if(isset($_REQUEST['error'])){
        echo "<h4>el formato no es valido</h4>";
         }
    echo"
    <form name=\"formProy\" method=\"post\" enctype=\"multipart/form-data\">
        <table>
            <tr>
                <th>Tipo de Proyecto</th>
                <td>$selectTipo</td>
            </tr>
            <tr>
                <th>Nombre del Proyecto</th>
                <td><input type=\"text\" name=\"nombre\" size=\"40\"></td>
            </tr>
            <tr>
                <th>Imagen Principal</th>
                <td><input type=\"file\" name=\"imag\"></td>
            </tr>
        </table>
        <input type=\"button\" name=\"cargar\" value=\"Cargar\" onclick=\"regProy();\">
    </form>";
 

funciones Ajax

Código Javascript:

function regProy(){
    //alert ("hola mundo");
     //Inicializo objeto
    ajax = objetoAjax();
    //Preparacion de la petición.
    ajax.open("POST", "registroProyecto.php",true);
    //Indicar procendia de la información
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //capturar datos
    var datosForm = formProyecto();
    //enviar datos en el cuerpo de la petición
    alert(datosForm);
    ajax.send(datosForm);
    //manejador de datos al ejecutarse peticion
    ajax.onreadystatechange=procesarData;
    
}
 
function formProyecto(){
    var campos=document.formProy.elements;
//  alert(campos);
    var datos=new Array();
 
    for(var i=0;i<campos.length;i++){
        //(alert(i);
        parametros=encodeURIComponent(campos[i].name)+"=";
        parametros+=encodeURIComponent(campos[i].value);
        alert(parametros);
        datos.push(parametros);
    }//fin for
    parametros=datos.join("&");
    //DEVOLVER la cadena
    return parametros;
}//fin funcion proyecto
 
 
function procesarData(){
    if(ajax.readyState == listoAjaxCompleto){
        
        if(ajax.status==200){
            nodoTexto=ajax.responseText;
            alert(nodoTexto)
            padre=document.getElementById('informacion');
            padre.innerHTML=nodoTexto;
            
        }//fin if status
        
        }//fin if
}
 

Al intentar capturar en registroProyecto.php el archivo de imagen.
asi
$imgPrin=$_FILES['imag'];
me da el siguiente error:

Notice: Undefined index: imag in C:\wamp\www\termotex\registroProyecto.php on line 8

pero capturandolo con $_POST me muestra el nombre de la imagen. :S pero no puedo acceder a las caracteristicas. Alguien que pueda darme una idea? GRACIASSSSSS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1

[caricatos]

Hola:

Con Ajax no se pueden enviar ficheros, además, no admite la cabecera obligatoria para ello (multipart/form-data).

Fíjate que en el tag form lo has puesto bien, pero en el objeto ajax, no.

Lo que suele hacerse es enviar el formulario a un iframe para que parezca ajax, pero son envíos normales.

Saludos

[rjulio21]

Si estuve regisando otros blogs luego de publicar mi duda y me tope con la verdad. jajajajjaja. aqui dejo uno con un ejemplo util.... por si alguien llega a tener la misma duda


http://www.desarrolloweb.com/articul...le-upload.html

[maycolalvarez]

sí, con CSS display:none;

[caricatos]

Hola:

Iniciado por rjulio21

Si estuve regisando otros blogs luego de publicar mi duda y me tope con la verdad. jajajajjaja. aqui dejo uno con un ejemplo util.... por si alguien llega a tener la misma duda


http://www.desarrolloweb.com/articul...le-upload.html

Acaso lo que has encontrado es distinto de lo que te respondí... ... también te podía mostrar un artículo anterior sobre el tema: Revisar las imágenes antes de subirlas.

Saludos

[rjulio21]

jajajaja. si si es lo mismo. eso quise decir. para cuando lei tu respuesta, ya habia visto ese blog. y lo postie pues tiene el código.. si alguien tiene la misma duda. puede guiarse. Pero tengo una duda. a ver si puedes ayudarme.

Basandonos en el ejemplo y en lo que tu me dices. coloco el iframe que me mostrara un script php aparte ejm "cargaImagen.php" y yo estoy trabajando en formularioImagen.php. como puedo yo desde la pagina formulario validar que se cargaron bien en cargaImagen.php. para luego colocar los archivos cargados.... como lo hace gmail. por ejemplo?

En el ejemplo del post que puse usan la funcion

Código Javascript:

function resultadoUpload(estado, file) {
...
}
 

Sin embargo no se de donde toma o como captura esos parametros "estado" y "file". Gracias....