Cómo subir un archivo con jQuery y Ajax + PHP

Por Juan Carlos Sosa

Para subir un archivo con  jQuery y Ajax + PHP, en lugar de  utilizar un plugin ya desarrollado y probado,  podemos utilizar la lógica de cómo se envía un archivo con Ajax:

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});

}

Configurando el Html de la página, algo similar tiene que quedar el Input:

<input type=’file’ name=’archivoImage’ id=’archivoImage’ />

<input type=’button’ id=’botonSubidor’ onclick=’uploadAjax()’ />

También pueden hacerlo con jQuery:

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

Obviamente el html tiene que quedar así:

<input type=’file’ name=’archivoImage’ id=’archivoImage’ />

<input type=’button’ id=’botonSubidor’ />

El archivo upload.php

//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);

Espero que esta información les sea de utilidad ¿Ustedes cómo lo harían?