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
- 1368 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
-
- 407146
- 1
- Jul 5, 2015
Sin Respuesta
-
- 169
- 0
- Mar 19
-
- 86
- 2
- Feb 26
-
- 1135
- 0
- Nov 7, 2023
-
- 302
- 0
- Sep 19, 2023
-
- 305
- 0
- Ago 21, 2023
-
- 388
- 0
- May 14, 2023
-
- 358
- 0
- Abr 21, 2023
-
- 445
- 0
- Mar 31, 2023
- ver todas
Preguntas relacionadas
Actividad Reciente
ArtEze respondió hace 1 día
Alguien sabe, no me ignorenArtEze seleccionó una respuesta hace 1 día
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió hace 1 día
Bajar extensión de Chrome sin actualizar el navega…ArtEze preguntó hace 1 día
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió hace 1 día
No me deja instalar OracleArtEze respondió hace 1 día
Formulario que guarde los datos de un jsonArtEze comentó hace 1 día
Script /boot/ scrapingSantiago2610 comentó Mar 23
Acualizar ChoiceField en djangoSantiago2610 preguntó Mar 19
Acualizar ChoiceField en djangogonzalss preguntó Feb 26
Script /boot/ scraping
Ultimas Preguntas
Preguntas relacionadas
Usuarios Top
- Leonardo-Tadei
- 227320 Puntos
- Peter
- 150470 Puntos
- white
- 75880 Puntos
- carlossevi
- 63580 Puntos
- magarzon
- 30650 Puntos
- pregunton
- 20400 Puntos
Todos los Usuarios Usuarios Nuevos
...