entre Desarrolladores

Question

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

Answer 1

1 Respuestas

rach · Answer 2 · 2015-07-20T14:39:29+0000

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

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
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.

Pregunta

Algún ejemplo de como subir una imagen con php y que en automático la cargue en un div

Por favor, accede o regístrate para añadir un comentario.

1 Respuesta

rach comentado Jul 21, 2015

Peter comentado Jul 21, 2015

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

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

mchojrin respondió Dic 9

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta