(Actualizado con opcin para eliminar las fotos ) Seguramente muchas veces en tus proyectos tuviste que subir

imgenes al
servidor para un modulo una noticias, eventos o quizs una galera de fotos pero siempre con la molestia de que la pagina se
recargue al enviar el formulario.
En esta ocasin he desarrollado una aplicacin para que puedas subir tus imgenes al servidor sin la necesidad de recargar la
pagina y que estas sean grababas en una tabla mysql, todo gracias a la LiberiaAjaxupload el cual con un solo clic y seleccionando la
imagen automticamente con php nos permitir cargar nuestras imgenes.
- Incluimos las librerias jquery y ajaxupload

- Incluimos las librerias jquery y ajaxupload

1 <script type="text/javascript" src="jquery.js"></script>

2 <script type="text/javascript" src="ajaxupload.js"></script>
- Html

1 <div id="content">
2
<a href="javascript:;" id="upload">Subir Foto</a>
3
<ul id="gallery">
4
<!-- Cargar Fotos -->
5
</ul>
6
</div>
- Css

1 <style type="text/css">
2
3
body{
4
margin:0;
5
padding:0;
6
font:normal 12px Arial, Helvetica, sans-serif
7
}
8
#content{
9
width:700px;
10
margin:20px auto;
11
height:550px;
12
border:6px solid #F3F3F3;
13
padding-top:10px;
14
overflow-y:auto
15
}
16
#upload{

17
padding:12px;
18
font:bold 12px Arial, Helvetica, sans-serif;
19
text-align:center;
20
background:#f2f2f2;
21
color:#3366cc;
22
border:1px solid #ccc;
23
width:150px;
24
display:block;
25
-moz-border-radius:5px;
26
-webkit-border-radius:5px;
27
margin:0 auto;
28
text-decoration:none
29
}
30
#gallery{
31
list-style:none;
32
margin:20px 0 0 0;
33
padding:0
34
}
35
#gallery li{
36
display:block;
37
float:left;
38
width:155px;
39
height:160px;
40
background:#9AF099;
41
border:1px solid #093;
42
text-align:center;
43
padding:6px 0;
44
margin:5px 0 5px 14px
45
}
46
#gallery li img{
47
width:145px;
48
height:140px
49
}
50
51 </style>
El javascript donde creamos una instancia de la clase Ajaxupload para poder cargar nuestras imagenes.

1 <script type="text/javascript">
2
$(document).ready(function(){
3
4
var button = $('#upload'), interval;
5
new AjaxUpload(button,{
6
action: 'procesa.php',
7
name: 'image',
8
onSubmit : function(file, ext){
9
// cambiar el texto del boton cuando se selecicione la imagen
10
button.text('Subiendo');
11
// desabilitar el boton
12
this.disable();
13
14
interval = window.setInterval(function(){
15
var text = button.text();
16
if (text.length < 11){
17
button.text(text + '.');
18
} else {
19
button.text('Subiendo');
20
}
21
}, 200);
22
},

23
onComplete: function(file, response){
24
button.text('Subir Foto');
25
26
window.clearInterval(interval);
27
28
// Habilitar boton otra vez
29
this.enable();
30
31
// Aadiendo las imagenes a mi lista
32
33
if($('#gallery li').length == 0){
34
$('#gallery').html(response).fadeIn("fast");
35
$('#gallery li').eq(0).hide().show("slow");
36
}else{
37
$('#gallery').prepend(response);
38
$('#gallery li').eq(0).hide().show("slow");
39
}
40
}
41
});
42
43
// Listar fotos que hay en mi tabla
44
$("#gallery").load("procesa.php?action=listFotos");
45
});
46
47 </script>
- PHP para hacer el proceso de subir la imagen e insertar en nuestra tabla, ademas de listar todas las imagenes ya existentes.

1 <?php
2 $cn = mysql_connect("server","user","pwd");
3 mysql_select_db("bd", $cn);
4
5 if($_GET['action'] == 'listFotos'){
6
7
$query = mysql_query("SELECT * FROM fotos ORDER BY id_foto DESC", $cn);
8
while($row = mysql_fetch_array($query))
9
{
10
echo '<li>
11
<img src="photos/'.$row['nombre_foto'].'" />
12
<span>'.$row['nombre_foto'].'</span>
13
</li>';
14
}
15
16 }else
17 {
18
$destino = "photos/";
19
if(isset($_FILES['image'])){
20
21
$nombre = $_FILES['image']['name'];
22
$temp = $_FILES['image']['tmp_name'];
23
24
// subir imagen al servidor
25
if(move_uploaded_file($temp, $destino.$nombre))
26
{
27
$query = mysql_query("INSERT INTO fotos VALUES('','".$nombre."')" ,$cn);
28
}
29
30
echo '<li>
31
<img src="photos/'.$nombre.'" />
32
<span>'.$nombre.'</span>
33
</li>';
34
}

35 }
36 ?>