subir archivo con jquery y ajax sin plugin

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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

1
2
<input type='file' name='archivoImage' id='archivoImage' />
<input type='button' id='botonSubidor' onclick='uploadAjax()' />

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

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

obviamente el html tiene que quedar asi no lo olviden:

1
2
<input type='file' name='archivoImage' id='archivoImage' />
<input type='button' id='botonSubidor' />

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//upload.php
$return = Array('ok'=>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' => FALSE, 'msg' => "Ocurrio un error al subir el archivo. No pudo guardarse.", 'status' => 'error');
        }
echo json_encode($return);
/**
jaja pues  lo que quieras hacer con el codigo, yo tengo uno de ejemplo
 **/

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.