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.

Facebook Comments

10 comentarios

  1. Pingback: Bitacoras.com
  2. 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á….

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *