hola a todos, alguien me podría decir como puedo subir una imagen con php y que el link lo guarde en una bd y despues que en automático se vea en un div, sin recargar la pagina, por favor alguna idea?
de antemano gracias
entre Desarrolladores
Recibe ayuda de expertos
Registrate y pregunta
Es gratis y fácil
Recibe respuestas
Respuestas, votos y comentarios
Vota y selecciona respuestas
Recibe puntos, vota y da la solución
Pregunta
Algún ejemplo de como subir una imagen con php y que en automático la cargue en un div
- preguntó
- Software
- 1350 Vistas
- 1 Respuestas
- solucionada
1 Respuesta
> <html>
<head>
<title>Image upload</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<body>
<!--el enctype debe soportar subida de archivos con multipart/form-data-->
<form enctype="multipart/form-data" class="formulario">
<label>Subir un archivo</label><br >
<input name="archivo" type="file" id="imagen" ><br ><br >
<input type="button" value="Subir imagen" ><br >
</form>
<!--div para visualizar mensajes-->
<div class="messages"></div><br ><br >
<!--div para visualizar en el caso de imagen-->
<div class="showImage"></div>
</body>
<script>
$(document).ready(function(){
$(".messages").hide();
//queremos que esta variable sea global
var fileExtension = "";
//función que observa los cambios del campo file y obtiene información
$(':file').change(function()
{
//obtenemos un array con los datos del archivo
var file = $("#imagen")[0].files[0];
//obtenemos el nombre del archivo
var fileName = file.name;
//obtenemos la extensión del archivo
fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
//obtenemos el tamaño del archivo
var fileSize = file.size;
//obtenemos el tipo de archivo image/png ejemplo
var fileType = file.type;
//mensaje con la información del archivo
showMessage("<span class='info'>Archivo para subir: "+fileName+", peso total: "+fileSize+" bytes.</span>");
});
//al enviar el formulario
$(':button').click(function(){
//información del formulario
var formData = new FormData($(".formulario")[0]);
var message = "";
//hacemos la petición ajax
$.ajax({
url: 'upload.php',
type: 'POST',
// Form data
//datos del formulario
data: formData,
//necesario para subir archivos via ajax
cache: false,
contentType: false,
processData: false,
//mientras enviamos el archivo
beforeSend: function(){
message = $("<span class='before'>Subiendo la imagen, por favor espere...</span>");
showMessage(message)
},
//una vez finalizado correctamente
success: function(data){
message = $("<span class='success'>La imagen ha subido correctamente.</span>");
showMessage(message);
if(isImage(fileExtension))
{
$(".showImage").html("<img src='files/"+data+"' >");
//clonar input para limpiar input
var control = $("#imagen");
control.replaceWith( control = control.clone( true ) );
}
},
//si ha ocurrido un error
error: function(){
message = $("<span class='error'>Ha ocurrido un error.</span>");
showMessage(message);
}
});
});
})
//como la utilizamos demasiadas veces, creamos una función para
//evitar repetición de código
function showMessage(message){
$(".messages").html("").show();
$(".messages").html(message);
}
//comprobamos si el archivo a subir es una imagen
//para visualizarla una vez haya subido
function isImage(extension)
{
switch(extension.toLowerCase())
{
case 'jpg': case 'gif': case 'png': case 'jpeg':
return true;
break;
default:
return false;
break;
}
}
</script>
</html>
upload.php
<?php
$link = mysql_connect("localhost", "root", "") or die ("ERROR AL CONECTAR");
$db_select = mysql_select_db("pruebas");
//comprobamos que sea una petición ajax
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
//obtenemos el archivo a subir
$archivo = $_FILES['archivo'];
//obetenemos nombre del archivo
$file = $_FILES['archivo']['name'];
//comprobamos si existe un directorio para subir el archivo
//si no es así, lo creamos
if(!is_dir("files/"))
mkdir("files/", 0777);
//comprobamos si el archivo ha subido
if ($file && move_uploaded_file($_FILES['archivo']['tmp_name'],"files/".$file))
{
$pathOrg = $archivo['tmp_name'];
$filename = $archivo['name'];
$codigo_fecha = date("YmdHis");
$no_aleatorio = rand(100, 999); //GENERAMOS TRES DIGITOS PARA INCORPORARLO AL FINAL DEL NOMBRE
$name = $codigo_fecha.$no_aleatorio; //CODIGO DE 17 DIGITOS
$extension = pathinfo($filename, PATHINFO_EXTENSION);
$sql= "insert into imagen(name,ext) values('$name','$extension')";
$result= mysql_query($sql, $link);
sleep(3);//hacer que la petición dure por lo menos 3 segundos es opcional
echo $file;//devolvemos el nombre del archivo para pintar la imagen
}
}else{
throw new Exception("Error Processing Request", 1);
}
?>
CREATE DATABASE IF NOT EXISTS `pruebas` /*!40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_bin */;
USE `pruebas`;
-- Volcando estructura para tabla pruebas.imagen
DROP TABLE IF EXISTS `imagen`;
CREATE TABLE IF NOT EXISTS `imagen` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) COLLATE utf8_bin DEFAULT NULL,
`ext` varchar(4) COLLATE utf8_bin DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin;
Fuente:
enter link description here
movido como respuesta
Por favor, accede o regístrate para añadir un comentario.
Por favor, accede o regístrate para responder a esta pregunta.
En el blog
-
- 406870
- 1
- Jul 5, 2015
Sin Respuesta
-
- 99
- 0
- Mar 19
-
- 65
- 1
- Feb 26
-
- 155
- 0
- Ene 30
-
- 604
- 0
- Nov 7, 2023
-
- 260
- 0
- Sep 19, 2023
-
- 286
- 0
- Ago 21, 2023
-
- 364
- 0
- May 14, 2023
-
- 324
- 0
- Abr 21, 2023
- ver todas
Preguntas relacionadas
Actividad Reciente
Santiago2610 comentó hace 5 días
Acualizar ChoiceField en djangoSantiago2610 preguntó Mar 19
Acualizar ChoiceField en djangogonzalss preguntó Feb 26
Script /boot/ scrapingParkJo preguntó Ene 30
No me deja instalar Oracleelporfirio respondió Ene 10
Actualizar la imagen con los datos devuelto en un …ovedg preguntó Dic 31, 2023
Actualizar la imagen con los datos devuelto en un …Ehdez preguntó Nov 7, 2023
Necesito en wordpress un pluging que me calcule la…pedrourday preguntó Sep 19, 2023
Alternativas a ThreeJS y BabylonJS?pedrourday preguntó Ago 21, 2023
¿Que tecnologias y lenguajes me recomiendan?Fabio respondió Jul 11, 2023
plugin de efecto circular 3d en imagenes
Ultimas Preguntas
Preguntas relacionadas
Usuarios Top
- Leonardo-Tadei
- 227320 Puntos
- Peter
- 150460 Puntos
- white
- 75880 Puntos
- carlossevi
- 63580 Puntos
- magarzon
- 30650 Puntos
- pregunton
- 20400 Puntos
Todos los Usuarios Usuarios Nuevos
...