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:

$(document).ready(function() {
$('#botonSubidor').click(uploadAjax);
})

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.

//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
**/

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.

Artículos Relacionados

Comentarios

  1. 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 ……

  2. elram dice:

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

    1. godie dice:

      hay varias formas we dejame calar y luego lo subo w

  3. rober dice:

    mu buen ejemplo si señor!!!

    gracias

  4. Yse dice:

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

    1. godie dice:

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

  5. JAntonio dice:

    Eres genial, me salvaste el pellejo, Saludos

  6. 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á….

  7. Nothing dice:

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

    1. godie dice:

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