Carga de archivos PHP usando jquery post

Avíseme si alguien sabe cuál es el problema con este código.Carga de archivos PHP usando jquery post

Básicamente quiero cargar un archivo usando jQuery

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function(event) { 
     $('#form1').submit(function(event) { 
     event.preventDefault(); 
     $.post('post.php',function(data){ 
      $('#result').html(data); 
     }); 
     }); 
    }); 
    </script> 
</head> 
<body> 
<form id="form1"> 
    <h3>Please input the XML:</h3> 
    <input id="file" type="file" name="file" /><br/> 
    <input id="submit" type="submit" value="Upload File"/> 
</form> 

<div id="result">call back result will appear here</div> 

</body> 
</html>

y mi php 'post.php'

<?php 
    echo $file['tmp_name']; 
?>

Nombre del archivo subido no se devuelve. Problema es que no pude acceder al archivo cargado.

¡Gracias de antemano! Shiv

Fuente

2012-06-15 Shiv

¿Qué haces –

Básicamente quiero cargar un archivo usando jQuery

No puedes subir archivos utilizando AJAX . Se podría utilizar el plugin jquery.form que utiliza un iframe oculto:

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(event) { 
      $('#form1').ajaxForm(function(data) { 
       $('#result').html(data); 
      }); 
     }); 
    </script> 
</head> 
<body> 
<form id="form1" action="post.php" method="post" enctype="multipart/form-data"> 
    <h3>Please input the XML:</h3> 
    <input id="file" type="file" name="file" /><br/> 
    <input id="submit" type="submit" value="Upload File"/> 
</form> 

<div id="result">call back result will appear here</div> 

</body> 
</html>

Observe también la enctype="multipart/form-data" en el formulario.

Otra posibilidad es utilizar el HTML5 File API que le permite lograr eso suponiendo que el navegador del cliente lo admite.

Fuente

2012-06-15 07:56:28

¿Quiso decir que no puede cargar archivos usando AJAX o que no puede subir archivos usando el método de jQuery's post()? –

No, no, no, debería usar un complemento de formulario jQuery para cargar archivos de forma asíncrona. No puede cargar archivos con el método jQuery $ .post. El archivo se cargará con iframe oculto

Otra forma es utilizar HTML5 carga con FileAPI/BlobApi

Fuente

2012-06-15 07:54:58 odiszapc

Gracias compañero! Por ahora, voy a ir con el envío de formulario html normal en lugar de la publicación de jquery. De esa forma, ¡me funciona! – Shiv

Intente cargar con un iframe porque no puede enviar un archivo con el método $ .post.

Fuente

2012-06-15 07:56:57

-1

También puede probar jQuery uploadify - http://www.uploadify.com/

Fuente

2012-06-16 11:37:43 norbi771

¿Por qué irá con una biblioteca externa cuando el navegador tiene una API para eso? – Heitara

Porque estábamos hablando de subir archivos hace mucho tiempo, diría un siglo o más en términos de desarrollo de nuevas tecnologías. Cuando propuse que no había html5 o que solo estaba comenzando y algo más que puro html requería flash (en su mayoría).Uploadify era una biblioteca bastante buena en ese momento y, entre otras características, ofrecía barra de progreso, carga de archivos múltiples, arrastrar y soltar y, si no recuerdo mal, estaba basada en jquery. – norbi771

No es posible subir archivos con jQuery $ .post, Neverthless, con la API de archivos y XMLHttpRequest, es perfectamente posible cargar un archivo en AJAX, y se puede incluso saber cuántos datos se han cargado aún ...

$('input').change(function() 
{ 
    var fileInput = document.querySelector('#file'); 

    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', '/upload/'); 

    xhr.upload.onprogress = function(e) 
    { 
     /* 
     * values that indicate the progression 
     * e.loaded 
     * e.total 
     */ 
    }; 

    xhr.onload = function() 
    { 
     alert('upload complete'); 
    }; 

    // upload success 
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
    { 
     // if your server sends a message on upload sucess, 
     // get it with xhr.responseText 
     alert(xhr.responseText); 
    } 

    var form = new FormData(); 
    form.append('title', this.files[0].name); 
    form.append('pict', fileInput.files[0]); 

    xhr.send(form); 
}

Fuente

2013-05-01 21:16:15 Buzut

Lamentablemente, el soporte para XHR2 aún no es bueno. Pero gracias por su aporte en esto, he logrado hacer una prueba completamente funcional con Zepto y algunos datos simulados usando ese enfoque. –

Todas las principales versiones actuales de navegadores lo soportan (incluso IE 10+). http://caniuse.com/xhr2 – Buzut

Su upload.php tiene algún error.

debe cambiar esta parte.

echo $file['tmp_name'];

a: -

echo $_FILES['file']['tmp_name'];

Fuente

2015-10-14 11:02:59

Carga de archivos PHP usando jquery post

Respuesta

Cuestiones relacionadas