Subir archivos usando php + ajax (jquery)

No es posible subir archivos al servidor usando ajax debido a un problema de seguridad, sin embargo es posible emularlo usando un iframe y de esa forma hacer un upload sin tener que recargar la pgina web, en este tutorial voy a explicar como hacer eso usando jquery. Por qu usar este plugin? Seguro habrs visto en Internet varias otras formas pero este nos da varias ventajas: Permite limitar la subida de archivos a algunas extensiones No necesita recargar la pgina web Facil de implementar Puedes controlar los eventos mientras se sube y despues de subir el archivo HTML para el uploader El plugin jquery se encarga casi de todo asi que lo nico que requerimos es un div que al darle click permita subir un archivo.
Cdigo:

<div id="upload_button">Upload</div> <ul id="lista"> </ul>

CSS para el uploader Ya cada uno se encarga de ponerle el formato que uno desee al boton, yo usar uno basico para darle algo de forma
Cdigo:

#upload_button { width:120px; height:35px; text-align:center; background-image:url(boton.png); color:#CCCCCC; font-weight:bold; padding-top:15px;

margin:auto; }

AJAX Primero hay que incluir la libreria jquery, luego el plugin y finalmente nuestro cdigo para manejar el uploader, no todo el cdigo que publico es necesario ya que puedes obviar la parte de la comprobacin de extensin al igual que el agregar el nombre del archivo a la lista luego de completar la subida del archivo.
Cdigo:

<script language="javascript" src="js/jquery-1.3.1.min.js"></script> <script language="javascript" src="js/AjaxUpload.2.0.min.js"></script> <script language="javascript"> $(document).ready(function(){ var button = $('#upload_button'), interval; new AjaxUpload('#upload_button', { action: 'upload.php', onSubmit : function(file , ext){ if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ // extensiones permitidas alert('Error: Solo se permiten imagenes'); // cancela upload return false; } else { Cambio el texto del boton y lo deshabilito button.text('Uploading'); this.disable(); } }, onComplete: function(file, response){ button.text('Upload'); // habilito upload button this.enable(); // Agrega archivo a la lista $('#lista').appendTo('.files').text(file); } }); }); </script>

Archivo: Upload.php Veamos ahora que ocurre con el archivo php que subir la imagen al servidor y que podemos cambiar segn nuestras necesidades
Cdigo:

<?php // defino la carpeta para subir $uploaddir = 'uploads/'; // defino el nombre del archivo $uploadfile = $uploaddir . basename($_FILES['userfile']['name']); // Lo mueve a la carpeta elegida if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { echo "success"; } else { echo "error"; } ?>

Para los vagos que no quieren copiar el codigo le dejo un archivo con todos los codigos y en funcionamiento