Pasar valores de un input file a PHP

[navegantes]

Hola.

Primeramente decir que espero que tengan un buen año a todos :D

Ahora vamos a por el "pequeño" problema que tengo.

Estoy haciendo un formulario en el que tengo que subir un fichero al servidor.

Para validar el formulario uso Jquery validate() y posteriormente serialize() para obtener los datos y pasarlos a PHP.

Todo funciona perfectamente salvo cuando llega el momento de usar un input type="file" Para empezar por lo visto serialize() no es capaz de reconocer dichos campos (o eso me ha parecido entender) y no hay manera de conseguir que PHP reciba los datos.

El campo file tiene su respectivo name e id. ¿Hay alguna manera de pasarle los datos a PHP mediante el $.ajax

Os dejo el código aunque es muy sencillo.

Código Javascript:

$('#formPrincipal').validate({
        
        rules:{
            /* el campo file no tiene regla y como los demás funcionan correctamente lo he limpiado */
        },
        
        
        submitHandler:function(){
            
            
            var cadena = $('#formPrincipal').serialize();
            alert(cadena); /*Simple prueba, posteriormente lo quitaré */
            
            $.ajax({
                
                beforeSend: function(){
                },
                
                cache:false,
                type: "POST",
                dataType: "json",
                url:"php/upload.php",
                data:cadena + "&t=1&accion=add&idr=" + Math.random(),
                success: function(response){},
                error:function(){}
            });
            return false;
        },
        
            errorPlacement: function(error, element){
            error.appendTo(element.prev("span").append());
        }
    });
 

Gracias a todos de antemano.

[David]

Revisa este tema:
http://www.forosdelweb.com/f18/envia...9/#post4337609

Saludos.

[rodrigo791]

http://cazaresluis.com/wordpress/201...ry-para-fotos/

revisa esto, tal vez te ayude.

[navegantes]

Hola de nuevo.

Ya he revisado lo que habéis puesto, pero no logro que funcione. En realidad no es que quiera mostrar una miniatura de una imagen (Que también pero eso ya lo he logrado mediante HTML5) sino que por ejemplo quiero subir un .pdf o un .jpg.

He probado a añadir

Código Javascript:

filepdf = document.formPrincipal.filepdf.value;
 

Y dentro de $.ajax en data he puesto:

Código Javascript:

cadena + "&file="+filepdf+"&t=1&accion=add&idr=" + Math.random()
 

Pero no hay manera de que cuando uso

Código PHP:

$file = $_FILES['file']['name'];
 

se entere de lo que le envío.

¿Alguna idea?

[Panino5001]

Si lo vas a hacer vía AJAX (XHR), tendrás que usar lo que te mencionó David: http://www.w3.org/TR/file-upload/
Entonces el envío lo vas a recoger con la superglobal $_POST o $_FILES dependiendo de cómo lo trabajes.
Un buen ejemplo con Form.Data y la superglobal $_FILES: http://net.tutsplus.com/tutorials/ja...les-with-ajax/
Si querés usar $_FILES sin AJAX NIVEL 2 vas a tener que usar un iframe (exactamente como te indicó también David).

Lo recomendable en desktop por ahora por ahora es usar iframes. Podés consultar el excelente artículo de caricatos: http://www.maestrosdelweb.com/editor...s-de-subirlas/

[rodrigo791]

bueno yo te deje 1 link, el cual sube imagenes mediante ajax, si lo vieras tal vez te ayudaría.

[navegantes]

Veamos agradezco a todos la ayuda ofrecida, pero creo que no me estoy explicando correctamente.

No quiero realizar una previsualización de ningún archivo en este caso. Simplemente tengo un input type="file" donde selecciono un .pdf y quiero subirlo a un servidor a la vez que guardo el nombre en una base de datos.
No soy capaz de pasar mediante post los datos a PHP.

Tal y como tengo montado el $.ajax() serializo todos los datos los cuales llegan perfectamente a PHP mediante $_POST y posteriormente se guardan correctamente en una base de datos, pero cuando llega el de tipo file no se entera de nada y no se como pasarle ese campo.

[rodrigo791]

Se que no queres hacer previsualización de nada, pero en éste caso usa ajax para subir los archivos y por eso te pase el link.
A ver : "No soy capaz de pasar mediante post los datos a PHP."
Solo tenes que usar $_FILES y listo, no hay miesterio. http://php.net/manual/es/reserved.variables.files.php

http://php.net/manual/es/features.fi...ost-method.php

Mira esto.

[navegantes]

Iniciado por rodrigo791

Se que no queres hacer previsualización de nada, pero en éste caso usa ajax para subir los archivos y por eso te pase el link.
A ver : "No soy capaz de pasar mediante post los datos a PHP."
Solo tenes que usar $_FILES y listo, no hay miesterio. http://php.net/manual/es/reserved.variables.files.php

http://php.net/manual/es/features.fi...ost-method.php

Mira esto.

Pues ya e visto el vídeo y sigo sin resolverlo. Uso $_FILES, y ese es el problema, que no recibe ningún tipo de información.

En mi segundo comentario muestro tres lineas de código, pienso que con esas lineas ya debería de funcionar pero no hay manera.

[carlos_belisario]

la pregunta, recibes los parámetros del formulario por $_POST?? la siguiente pregunta es tonta pero hay que hacerla le tienes declarado el enctype="multipart/form-data" al formulario??, porque en teoría si estas recibiendo el form y tienes esto declarado debería de funcionar

[David]

carlos_belisario, está enviando el formulario usando Ajax, no con un submit normal.

Lo que estamos tratando de explicarle es que para subir archivos tendrá que usar un iframe (o en algunos casos File API)

Panino5001 lo explicó muy bien, con enlaces y todo.

[navegantes]

Iniciado por carlos_belisario

la pregunta, recibes los parámetros del formulario por $_POST?? la siguiente pregunta es tonta pero hay que hacerla le tienes declarado el enctype="multipart/form-data" al formulario??, porque en teoría si estas recibiendo el form y tienes esto declarado debería de funcionar

Los parámetros que envío por $_POST llegan perfectamente, lo que no soy capaz es de hacerle llegar el dichoso input file al $_FILES
El formulario tiene correctamente puesto el enctype

[navegantes]

Iniciado por David

carlos_belisario, está enviando el formulario usando Ajax, no con un submit normal.

Lo que estamos tratando de explicarle es que para subir archivos tendrá que usar un iframe (o en algunos casos File API)

Panino5001 lo explicó muy bien, con enlaces y todo.

Agradezco mucho vuestra ayuda, pero no soy capaz, burro que es uno
Lo dejo por hoy que ya son las 4 de la madrugada ... igual mañana lo veo con otros ojos...

Buenas noches (o días) a todos.

[navegantes]

Hola de nuevo

Veamos yo tengo el siguiente el siguiente:

Código Javascript:

function handleFileSelectPdf(evt) {
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
 
    if(!f.name.match('\.pdf')){
        continue;
    }
 
    var reader = new FileReader();
 
    reader.onload = (function(theFile) {
    
        return function(e) {
            document.getElementById('list').innerHTML="";
            var span = document.createElement('span');
            span.innerHTML = ['<img class="thumb" src="css/pdf.jpg" title="', escape(theFile.name), '"/><span>', escape(theFile.name), '</span>'].join('');
            document.getElementById('list').insertBefore(span, null);
        };
    })(f);
 
    reader.readAsDataURL(f);
      
    }
  }
 
  document.getElementById('documentacion').addEventListener('change', handleFileSelectPdf, false);
 

Con esto consigo que me "cargue el archivo .pdf y si cumple con la extensión muestra una imagen de un archivo .pdf.

Ahora bien continuo sin saber como tomar ahora el valor de ese input para pasarlo a PHP y que este realice la carga... ando bastante perdido está claro y revisando los enlaces que me pasáis sigo sin entender porque no me funciona...

[Panino5001]

A ver con un ejemplo simplificado:

Código PHP:

  <?php 
if(isset($_POST['proceso']) && $_POST['proceso']=='upload' && isset($_POST['Base64EncodedFile']) && isset($_POST['fileName']) && !empty($_POST['Base64EncodedFile']) && !empty($_POST['fileName']) ){
    if(file_put_contents($_POST['fileName'],base64_decode($_POST['Base64EncodedFile']))!==false){
        echo '<a href="'.urlencode($_POST['fileName']).'" target="_blank">Ver</a>';
        }
    exit;
}
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>boo</title>
<script type="text/javascript">
//ajax a la antigua ---------inicio
function http(){
    if(typeof window.XMLHttpRequest!='undefined'){
        return new XMLHttpRequest();    
    }else{
        try{
            return new ActiveXObject('Microsoft.XMLHTTP');
        }catch(e){
            alert('Su navegador no soporta AJAX');
            return false;
        }    
    }    
}


function request(url,callback,params,t){
    var H=new http(),q= t || 0;
    if(!H)return;
    H.open('post',url+'?'+new Date().getTime(),true);
    var xmlHttpTimeout=setTimeout(function(){
        H.onreadystatechange=function(){}
        H.abort();
        H=null;    
        q++;
        if(q<3)
            request(url,callback,params,q);
    },10000);
    H.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    H.onreadystatechange=function(){
        if(H.readyState==4 && H.status == 200){
            clearTimeout(xmlHttpTimeout);
            callback(H.responseText);
            H.onreadystatechange=function(){}
            H.abort();
            H=null;
        }
    }
    var p='';
    for(var i in params){
        p+='&'+i+'='+encodeURIComponent(params[i]);    
    }
    H.send(p);
}

//ajax a la antigua ---------fin

//usamos esto como namespace global:
var ns={};


//tu función modificada:

function handleFileSelectPdf(evt) {
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
    if(!f.name.match('\.pdf')){
        continue;
    }

    var reader = new FileReader();

    reader.onload = (function(theFile) {
    
        return function(e) {
            document.getElementById('list').innerHTML="";
            var span = document.createElement('span');
            span.innerHTML = ['<img class="thumb" src="http://tecsol24h.net/images/stories/icono_PDF.gif" title="', escape(theFile.name), '"/><span>', escape(theFile.name), '</span>'].join('');
            document.getElementById('list').insertBefore(span, null);
                 //acá está tu problema: tenés que capturar de alguna manera el contenido del archivo
//yo elijo capturarlo para hacer un envío como texto y no como multipart, pero puede hacerse como en el ejemplo que pasé anteriormente, que usa multipart y Form.Data
            ns.file=e.target.result.split('data:application/pdf;base64,').pop();
            ns.name=escape(theFile.name);
         };
    })(f);

    reader.readAsDataURL(f);
    
    }
  }
function save(){
    if(ns.file && ns.file.length){
        document.getElementById('list').innerHTML+=' CARGANDO...';
        request(
                '<?php echo $_SERVER['PHP_SELF'] ?>',
                function(r){
                    document.getElementById('list').innerHTML=document.getElementById('list').innerHTML.split(' CARGANDO...').join(' '+r);
                },
                {'proceso':'upload','Base64EncodedFile':ns.file,'fileName':ns.name}
        );
    }
}
function iniciar(){
    document.getElementById('documentacion').addEventListener('change', handleFileSelectPdf, false);
    document.getElementById('enviar').addEventListener('click', save, false);
    
}
onload=iniciar;
</script>

</head>

<body>
<form>
  <label>
    <input type="file" name="fileField" id="documentacion">
  </label>
  <div id="list"></div>
  <input  name="enviar" id="enviar" type="button" value="Enviar">
</form>

</body>
</html>  

[navegantes]

Iniciado por Panino5001

A ver con un ejemplo simplificado:

Código PHP:

  <?php  
if(isset($_POST['proceso']) && $_POST['proceso']=='upload' && isset($_POST['Base64EncodedFile']) && isset($_POST['fileName']) && !empty($_POST['Base64EncodedFile']) && !empty($_POST['fileName']) ){ 
    if(file_put_contents($_POST['fileName'],base64_decode($_POST['Base64EncodedFile']))!==false){ 
        echo '<a href="'.urlencode($_POST['fileName']).'" target="_blank">Ver</a>'; 
        } 
    exit; 
} 
?> 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>boo</title> 
<script type="text/javascript"> 
//ajax a la antigua ---------inicio 
function http(){ 
    if(typeof window.XMLHttpRequest!='undefined'){ 
        return new XMLHttpRequest();     
    }else{ 
        try{ 
            return new ActiveXObject('Microsoft.XMLHTTP'); 
        }catch(e){ 
            alert('Su navegador no soporta AJAX'); 
            return false; 
        }     
    }     
} 
 
 
function request(url,callback,params,t){ 
    var H=new http(),q= t || 0; 
    if(!H)return; 
    H.open('post',url+'?'+new Date().getTime(),true); 
    var xmlHttpTimeout=setTimeout(function(){ 
        H.onreadystatechange=function(){} 
        H.abort(); 
        H=null;     
        q++; 
        if(q<3) 
            request(url,callback,params,q); 
    },10000); 
    H.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
    H.onreadystatechange=function(){ 
        if(H.readyState==4 && H.status == 200){ 
            clearTimeout(xmlHttpTimeout); 
            callback(H.responseText); 
            H.onreadystatechange=function(){} 
            H.abort(); 
            H=null; 
        } 
    } 
    var p=''; 
    for(var i in params){ 
        p+='&'+i+'='+encodeURIComponent(params[i]);     
    } 
    H.send(p); 
} 
 
//ajax a la antigua ---------fin 
 
//usamos esto como namespace global: 
var ns={}; 
 
 
//tu función modificada: 
 
function handleFileSelectPdf(evt) { 
    var files = evt.target.files; 
    for (var i = 0, f; f = files[i]; i++) { 
    if(!f.name.match('\.pdf')){ 
        continue; 
    } 
 
    var reader = new FileReader(); 
 
    reader.onload = (function(theFile) { 
     
        return function(e) { 
            document.getElementById('list').innerHTML=""; 
            var span = document.createElement('span'); 
            span.innerHTML = ['<img class="thumb" src="http://tecsol24h.net/images/stories/icono_PDF.gif" title="', escape(theFile.name), '"/><span>', escape(theFile.name), '</span>'].join(''); 
            document.getElementById('list').insertBefore(span, null); 
                 //acá está tu problema: tenés que capturar de alguna manera el contenido del archivo 
//yo elijo capturarlo para hacer un envío como texto y no como multipart, pero puede hacerse como en el ejemplo que pasé anteriormente, que usa multipart y Form.Data 
            ns.file=e.target.result.split('data:application/pdf;base64,').pop(); 
            ns.name=escape(theFile.name); 
         }; 
    })(f); 
 
    reader.readAsDataURL(f); 
     
    } 
  } 
function save(){ 
    if(ns.file && ns.file.length){ 
        document.getElementById('list').innerHTML+=' CARGANDO...'; 
        request( 
                '<?php echo $_SERVER['PHP_SELF'] ?>', 
                function(r){ 
                    document.getElementById('list').innerHTML=document.getElementById('list').innerHTML.split(' CARGANDO...').join(' '+r); 
                }, 
                {'proceso':'upload','Base64EncodedFile':ns.file,'fileName':ns.name} 
        ); 
    } 
} 
function iniciar(){ 
    document.getElementById('documentacion').addEventListener('change', handleFileSelectPdf, false); 
    document.getElementById('enviar').addEventListener('click', save, false); 
     
} 
onload=iniciar; 
</script> 
 
</head> 
 
<body> 
<form> 
  <label> 
    <input type="file" name="fileField" id="documentacion"> 
  </label> 
  <div id="list"></div> 
  <input  name="enviar" id="enviar" type="button" value="Enviar"> 
</form> 
 
</body> 
</html>  

¿La parte de AJAX a la antigua debe estar presente o puedo prescindir de ella?

[Panino5001]

Sí te referís a si podés reemplazarla con la implementación de AJAX de algún Framework: sí, podés hacerlo.
Igualmente, como tu pregunta pone en evidencia que no entendiste nada, te recomiendo que estudies un poco el código, principalmente los comentarios, y preguntes nuevamente aquello que no comprendas.
Acá decimos: "¡ponete media pila!", que traducido, sería: "¡amigo, pon un poco de voluntad!"

[navegantes]

Iniciado por Panino5001

Sí te referís a si podés reemplazarla con la implementación de AJAX de algún Framework: sí, podés hacerlo.
Igualmente, como tu pregunta pone en evidencia que no entendiste nada, te recomiendo que estudies un poco el código, principalmente los comentarios, y preguntes nuevamente aquello que no comprendas.
Acá decimos: "¡ponete media pila!", que traducido, sería: "¡amigo, pon un poco de voluntad!"

Primeramente agradecer el tiempo que estas invirtiendo en mi, y pedirte disculpas por ser tan negado.

Iremos por partes. ¿El apartado "ajax a la antigua" no hace la misma función que el bloque que tengo yo de $.ajax?

Código Javascript:

$.ajax({
                
                beforeSend: function(){
                },
                
                cache:false,
                type: "POST",
                dataType: "json",
                url:"php/upload.php",
                data:cadena + "&t=1&accion=add&idr=" + Math.random(),
                success: function(response){},
                error:function(){}
            });
 

He implementado las lineas que me comentas; ns.file y ns.name. después he añadido en data la siguiente linea:

Código Javascript:

data:cadena + "&documentacion="+ns.file+"&t=1&accion=add&idr=" + Math.random(),
 

En firebug me encuentro con esto

documentacion data:application/octet;base64,PD9waHANCgkvKg0KCQktIExpYnJlcsOtYTogC QkJQ29uZXhpw7NuIGNvbiBiYXNlIGRlIGRhdG9zIHkgY29udHJ vbCBkZSBlcnJvcmVzLg0KCQktIFZlcnNpw7NuIC8gUmV2aXNpw 7NuOiAJMS4wIDIwMTIuMTAuMDgNCgkJLSBQcm9ncmFtYWRvcjo gCQkJS2VwYSBkZSBHYW1ib2ENCgkqLw0KCQ0KCWVycm9yX3Jlc G9ydGluZygwKTsNCgkNCgkkc2VydmVyID0ibG9jYWxob3N0Ijs NCgkkbG9naW4gPSJrZXBhZGdhIjsNCgkkcGFzc3dvcmQgPSJub 3NmZXJhdHUiOw0KCSRkYiA9ImtlcGFkZ2EiOw0KCQ0KCSRjb25 lY19vayA9ICdTZSBjb25lY3TDsyBjb3JyZWN0YW1lbnRlJzsNC gkkY29uZWNfZmFpbCA9ICdObyBzZSBwdWRvIGNvbmVjdGFyIGN vbiBlbCBzZXJ2aWRvcic7DQoJJGNvbmVjX29rX2RiX2Vycm9yI D0gJ1NlIGNvbmVjdMOzIGFsIHNlcnZpZG9yIHBlcm8gbm8gYSB sYSBiYXNlIGRlIGRhdG9zJzsNCgkNCgkNCgkkY29uZXhpb24gP SBteXNxbF9jb25uZWN0KCRzZXJ2ZXIsICRsb2dpbiwgJHBhc3N 3b3JkKTsNCg0KCW15c3FsX3F1ZXJ5ICggIlNFVCBOQU1FUyAnd XRmOCciKTsgDQoJDQoJaWYgKCEkY29uZXhpb24pew0KCQkvL2V jaG8gJGNvbmVjX2ZhaWw7DQoJfWVsc2V7DQoJCSRkYnJlc3Vsd D1teXNxbF9zZWxlY3RfZGIoJGRiLCAkY29uZXhpb24pOw0KCQk vL2VjaG8gJGNvbmVjX29rOw0KCQlpZiAoISRkYnJlc3VsdCl7D QoJCQkvL2VjaG8gJGNvbmVjX29rX2RiX2Vycm9yOw0KCQl9DQo JfQ0KPz4=

Por lo que interpreto que algo debe estar cogiendo, pero mi fichero PHP sigue sin enterarse...

¿Voy por el camino correcto o sigo perdidisimo?

[Panino5001]

Sí, como te decía antes, podés usar tu framework preferido para la parte de AJAX; es casi lo mismo.
Fijate que en php tenés que convertir el $_POST['documentacion'] con base64_decode porque lo que enviás con AJAX es el contenido del archivo codificado en base64. Fijate que con mi código php hago eso y lo guardo en un directorio con file_put_contents:

Código PHP:

  file_put_contents($_POST['fileName'],base64_decode($_POST['Base64EncodedFile']))  
   

Otra cosa, fijate en esta línea:

Código PHP:

  ns.file=e.target.result.split('data:application/pdf;base64,').pop();  
   

Ahí estamos quitando de la cadena que entrega e.target.result esta parte: data:application/pdf;base64,

Eso lo puse así porque tu código indica que sólo querés pdf

[navegantes]

Hola de nuevo.

Bueno por fin lo he solucionado, aunque en realidad no como me lo ha planteado Panino.

Le agradezco su esfuerzo pero la verdad es que no he terminado de pillarlo por ese lado.

He decidido cambiar la forma en que lo hacía. Para empezar he usado el plugin Jquery Form y posteriormente he cambio mi querido $.ajax por ajaxsubmit. Mano de santo.

Este último lo me metido dentro del submitHandler del validate() y aunque me ha costado un poquito finalmente he logrado que haga lo que quiero.

De todas formas me queda claro que hay muchas cosas de las que cojeo, y espero que con más calma las vaya pillando.

Gracias a todos.