subir archivo con jquery y ajax sin plugin

subir archivo

Reinventando las cosas uno como siempre el bato queriendo saber como funcionan las cosas y asi  fue como no quise utilizar un plugin ya desarrollado y probado para subir archivos, por que por que pense que lo que ocupaba no era el plugin solo la logica donde se encuentra el como envian un archivo con ajax, entonces nos enfrentamos a un problemilla por que los plugins que habia visto  , de los 2 que vi el codigo fuente le hacian parecido generaban un formulario tipo multipart y lo enviaban yo no quise hacer eso y esto fue lo que me dio resultado mirad:


function uploadAjax(){
var inputFileImage = document.getElementById("archivoImage");
var file = inputFileImage.files[0];
var data = new FormData();

data.append(‘archivo’,file);
var url = “upload.php”;
$.ajax({
url:url,
type:’POST’,
contentType:false,
data:data,
processData:false,
cache:false});

}

Aqui lo que importa es el Objeto FormData que viene forma parte de XMLHttpRequest Level 2, y no lo soportan todos los navegadores pero, google chrome, safari y firefox los mas nuevos si funciona, bueno al menos en esos 3 he probado el codigo.

Configurando el html de la pagina algo asi tiene que quedar el input


Tambien pueden hacerlo con jquery para que su html se no se vea invadido por javascript entonces puedes hacerle asi mira camarada:

[code lang=”javascript”]
$(document).ready(function() {
$(‘#botonSubidor’).click(uploadAjax);
})[/code]
obviamente el html tiene que quedar asi no lo olviden:

<input id="archivoImage" name="archivoImage" type="file" />
<input id="botonSubidor" type="button" />

El archivo upload.php, puede ser cualquiera yo tengo este ejemplo aca pero pueden usar cualquiera, igual si quieren usar java o .net psss ahi lo procesan como ustedes quieran.

[code lang=”php”]
//upload.php
$return = Array(‘ok’=&gt;TRUE);
$upload_folder =’images’;
$nombre_archivo = $_FILES[‘archivo’][‘name’];
$tipo_archivo = $_FILES[‘archivo’][‘type’];
$tamano_archivo = $_FILES[‘archivo’][‘size’];
$tmp_archivo = $_FILES[‘archivo’][‘tmp_name’];
$archivador = $upload_folder . ‘/’ . $nombre_archivo;
if (!move_uploaded_file($tmp_archivo, $archivador)) {
$return = Array(‘ok’ =&gt; FALSE, ‘msg’ =&gt; "Ocurrio un error al subir el archivo. No pudo guardarse.", ‘status’ =&gt; ‘error’);
}
header(‘Content-Type: application/json’);
echo json_encode($return);
/**
jaja pues lo que quieras hacer con el codigo, yo tengo uno de ejemplo
**/
[/code]

Puedes ver el codigo aqui

Ya estuvo por hoy si no le entiendes ponle ahi en los comentarios, para explicar mejor igual y al rato subo los archivos para que solo modifiques lo que ocupes, se ven luego.

Facebook Comments

10 comments
  1. Bitacoras.com
    abril 20, 2012 at 6:28 pm

    Información Bitacoras.com…

    Valora en Bitacoras.com: Reinventando las cosas uno como siempre el bato queriendo saber como funcionan las cosas y asi  fue como no quise utilizar un plugin ya desarrollado y probado para subir archivos, por que por que pense que lo que ocupaba no ……

    Reply
  2. elram
    elram
    abril 20, 2012 at 9:43 pm

    yo lo ocupo con multiples archivos w, agrego mas files mediante javascript, pero como lo enviaria con tu codigo??

    Reply
    • godie
      godie • Post Author •
      abril 21, 2012 at 10:03 am

      hay varias formas we dejame calar y luego lo subo w

      Reply
  3. rober
    rober
    junio 7, 2012 at 6:26 am

    mu buen ejemplo si señor!!!

    gracias

    Reply
  4. Yse
    Yse
    agosto 19, 2012 at 6:30 pm

    Hola. ¿Puedes subir los archivos? No sé si estoy haciendo algo mal pero no me funciona…

    Reply
    • godie
      godie • Post Author •
      agosto 20, 2012 at 9:50 am

      Si puedo probe el codigo no se que te este fallando.

      Reply
  5. JAntonio
    JAntonio
    enero 23, 2013 at 8:47 am

    Eres genial, me salvaste el pellejo, Saludos

    Reply
  6. Iván Caballero
    Iván Caballero
    marzo 2, 2013 at 8:57 pm

    EN donde dice “document.getElementById(“archivoImage”);” creo que debería decir para ser mas entendible:
    document.getElementById(“archivo”);

    Tengo problemas para crear el parámetro data con FormData, tampoco me funciona y tengo el código igual, no hay error, el handler de evento exitoso se dispara..pero al archivo PHP que se encarga de subir el archivo, el $_FILES llega vacio… es decir no recibe nada….uso el safari mas nuevo que hay…

    No se porque será….

    Reply
  7. Nothing
    Nothing
    junio 17, 2015 at 7:14 pm

    Por que no colocas un ejemplo completo, tipo un archivo comprimido que se pueda descargar ?

    Reply
    • godie
      godie • Post Author •
      junio 22, 2015 at 3:24 pm

      por que se me fue el rollo, pero pronto colocare uno.

      Reply
Leave a Reply

Your email address will not be published. Required fields are marked *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Do NOT follow this link or you will be banned from the site!