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

1voto

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

1 Respuesta

2votos

blaDDI Puntos2260
> <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

0voto

rach comentado

hola muchas gracias por responder, ya logré subir la imagen, algo parecido a como me explicas, me apoye de está pagina
http://develoteca.com/bootstrap-file-input-archivos-utilizando-html5/
por cierto el componente está muy padre, el único detalle que tengo ahora es que no me permite arrastrar el link de la imagen al textarea, antes de usar estas librerías si me dejaba, la que me causa conflicto es la librería
<script src="../js/fileinput.min.js" type="text/javascript"></script>

por si alguien la puede revisar no se que cambiarle para que me permita arrastrar las imágenes y me aparezca el link en el área de texto, por favor se los agradecería mucho

https://github.com/kartik-v/bootstrap-fileinput/blob/master/js/fileinput.min.js

0voto

Peter comentado

Si ya lograste solucionar la duda de la pregunta, por favor comparte el código con la solución en una respuesta nueva y seleccionala como correcta.

Para las otras dudas por favor abre preguntas nuevas.

Saludos.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta