Categories: AJAX, PHP - Tags: AJAX, formulario, PHPNo 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 página web, en este tutorial voy a explicar como hacer eso usando jquery.
¿Por qué usar este plugin?
Seguro habras 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 página 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.
1
2
3
| <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
1
2
3
4
5
6
7
8
9
10
| #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 código para manejar el uploader, no todo el código que publico es necesario ya que puedes obviar la parte de la comprobación de extensión al igual que el agregar el nombre del archivo a la lista luego de completar la subida del archivo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <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> |
Upload.php
Veamos ahora que ocurre con el archivo php que subirá la imagen al servidor y que podemos cambiar según nuestras necesidades
1
2
3
4
5
6
7
8
9
10
11
12
| <?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";
}
?> |
//////// Actualización ///////////
He publicado un nuevo post respondiendo algunas dudas e implementando el ajax uploader con la última versión, pueden verlo AQUI
Últimos Comentarios