Hola, primero que tal buenas tardes.
Solicito si me pudieran ayudar maestros en este problema que tengo.
lo que sucede que este codigo
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Subir imágenes al servidor con Ajax y guardarlas en una tabla Mysql.</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxupload.js"></script>
<style type="text/css">
body{
margin:0;
padding:0;
font:normal 12px Arial, Helvetica, sans-serif
}
#content{
width:700px;
margin:20px auto;
height:550px;
border:6px solid #F3F3F3;
padding-top:10px;
overflow-y:auto
}
#upload{
padding:12px;
font:bold 12px Arial, Helvetica, sans-serif;
text-align:center;
background:#f2f2f2;
color:#3366cc;
border:1px solid #ccc;
width:150px;
display:block;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin:0 auto;
text-decoration:none
}
#gallery{
list-style:none;
margin:20px 0 0 0;
padding:0
}
#gallery li{
display:block;
float:left;
width:155px;
height:160px;
background:#9AF099;
border:1px solid #093;
text-align:center;
padding:6px 0;
margin:5px 0 5px 14px;
position:relative
}
#gallery li img{
width:145px;
height:140px
}
#gallery li a{
position:absolute;
right:10px;
top:10px
}
#gallery li a img{ width:auto; height:auto}
</style>
<script type="text/javascript">
$(document).ready(function(){
var button = $('#upload'), interval;
new AjaxUpload(button,{
action: 'procesa.php',
name: 'image',
onSubmit : function(file, ext){
// cambiar el texto del boton cuando se selecicione la imagen
button.text('Subiendo');
// desabilitar el boton
this.disable();
interval = window.setInterval(function(){
var text = button.text();
if (text.length < 11){
button.text(text + '.');
} else {
button.text('Subiendo');
}
}, 200);
},
onComplete: function(file, response){
button.text('Subir Foto');
window.clearInterval(interval);
// Habilitar boton otra vez
this.enable();
// Añadiendo las imagenes a mi lista
if($('#gallery li').length == 0){
$('#gallery').html(response).fadeIn("fast");
$('#gallery li').eq(0).hide().show("slow");
}else{
$('#gallery').prepend(response);
$('#gallery li').eq(0).hide().show("slow");
}
}
});
// Listar fotos que hay en mi tabla
$("#gallery").load("procesa.php?action=listFotos");
// Eliminar
$("#gallery li a").live("click",function(){
var a = $(this)
$.get("procesa.php?action=eliminar",{id:a.attr("id")},function(){
a.parent().fadeOut("slow")
})
})
});
</script>
</head>
<body>
<div id="content">
<a href="javascript:;" id="upload">Subir Foto</a>
<ul id="gallery">
<!-- Cargar Fotos -->
</ul>
</div>
</body>
</html> que requiere procesar.php:
Código HTML:
<?php
$cn = mysql_connect("localhost","XXXXXX","XXXXXXXX");
mysql_select_db("XXXXXXXX", $cn);
if($_GET['action'] == 'listFotos'){
$query = mysql_query("SELECT * FROM fotos ORDER BY id_foto DESC", $cn);
while($row = mysql_fetch_array($query))
{
echo '<li>
<a href="javascript:;" id="'.$row['id_foto'].'"><img src="delete.png" /></a>
<img src="photos/'.$row['nombre_foto'].'" />
<span>'.$row['nombre_foto'].'</span>
</li>';
}
}else if($_GET['action'] == 'eliminar'){
$query = mysql_query("DELETE FROM fotos WHERE id_foto = '".$_GET['id']."'", $cn);
}else
{
$destino = "photos/";
$filetype = $_FILES['image']['type'];
$type = substr($filetype, (strpos($filetype,"/"))+1);
$types=array("jpeg","gif","png");
if(in_array($type, $types)){
if(isset($_FILES['image'])){
$nombre = $_FILES['image']['name'];
$temp = $_FILES['image']['tmp_name'];
// subir imagen al servidor
if(move_uploaded_file($temp, $destino.$nombre))
{
$query = mysql_query("INSERT INTO fotos VALUES('','".$nombre."')" ,$cn);
$ID = mysql_insert_id();
}
echo '<li>
<a href="javascript:;" id="'.$ID.'"><img src="delete.png" /></a>
<img src="photos/'.$nombre.'" />
<span>'.$nombre.'</span>
</li>';
}
}else{
echo "Solo imagenes jpg,png,gif";
}
}
?> para subir la imagen... bueno como hago para que al momento de subir la misma imagen con el mismo nombre no reemplaze a la otra, te lleve a un error donde diga el nombre ya esta siendo utilizado, prueba cambiando el nombre.
Estilo como este hosting: http://i.subirimagenes.cl/k/1.png
La idea que una persona que desconoce cuales imagenes hay no reemplaza la que ya existe, algun codigo dentro de prozezar o algo mas.
Porfavor les pido la ayuda.
Gracias.