[SOLUCIONADO] Cambiar background de div en css al pulsar botón

[jsusarevalo]

Hola a tod@s!

Necesito una ayudita.

Tengo un formulario de subida de imágenes a mi servidor mediante php.

Al subir la imagen se almacena en una carpeta llamada upload y se renombra mediante md5.

El caso es que necesito que al subir esta imagen al servidor, el background de una div se cambie automáticamente por esta imagen, y que cuando el usuario abandone la página, vuelva la imagen original.

Muchas gracias a todos de antemano.

[javioreto]

Lo que comentas es bastante sencillo. Existen dos formas tal como hagas la subida de la imagen al servidor. Si la cargas mediante ajax sin recargar la página deberás usar javascript y si al cargarla recargas la web entera al llamar a un segundo archivo php es muy sencillo.

Si pones el código fuente del formulario y del archivo de subir puedo hacerte el apaño.

[jsusarevalo]

Iniciado por javioreto

Lo que comentas es bastante sencillo. Existen dos formas tal como hagas la subida de la imagen al servidor. Si la cargas mediante ajax sin recargar la página deberás usar javascript y si al cargarla recargas la web entera al llamar a un segundo archivo php es muy sencillo.

Si pones el código fuente del formulario y del archivo de subir puedo hacerte el apaño.

Hola javioreto, muchas gracias por tu rápida respuesta. La imagen la subo a una carpeta al servidor mediante php. Aquí te dejo el código fuente a ver cómo lo ves:

Código HTML:

<form action="" method="post" enctype="multipart/form-data">
			
			  <label for="file">Selecciona tu foto:</label>
			  <input type="file" name="file" id="file">
			  <input type="submit" name="submit" value="Subir">
		</form> 

Código PHP:

   <?php
 
// Upload and Rename File
 
if (isset($_POST['submit']))
{
    $filename = $_FILES["file"]["name"];
    $file_basename = substr($filename, 0, strripos($filename, '.')); // get file extention
    $file_ext = substr($filename, strripos($filename, '.')); // get file name
    $filesize = $_FILES["file"]["size"];
    $allowed_file_types = array(".gif", ".jpeg", ".jpg", ".png");
 
    if (in_array($file_ext,$allowed_file_types) && ($filesize < 200000))
    {    
        // Rename file
        $newfilename = md5($file_basename) . $file_ext;
        if (file_exists("upload/" . $newfilename))
        {
            // file already exists error
            echo "El archivo ya existe. Por favor cambia el nombre.";
        }
        else
        {        
            move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $newfilename);
            echo "Imagen subida correctamente.";
            echo "<a href=https://eni-lift.es/elevador-vivienda.php></a>";    
        }
    }
    elseif (empty($file_basename))
    {    
        // file selection error
        echo "Por favor selecciona un archivo.";
    } 
    elseif ($filesize > 500000)
    {    
        // file size error
        echo "El archivo es demasiado grande. Tamaño máximo 500kb.";
    }
    else
    {
        // file type error
        echo "Archivos permitidos: " . implode(', ',$allowed_file_types);
        unlink($_FILES["file"]["tmp_name"]);
    }
}
 
?>   

Muchas gracias por tu ayuda!

[caricatos]

Hola:

No sé si te vale, pero te paso un enlace: Revisar las imágenes antes de subirlas.

Saludos

[javioreto]

Ahora me tendrías que decir donde esta el div que debe cambiar de fondo:

la clave esta en la variable:

Código PHP:

$newfilename
 

Lo único que deberías hacer es pasar esa variable al archivo donde la vayas a mostrar, por ejemplo:

1. Una vez subida y estando en la pag donde te dice ok o error en la subida puedes volver a la pag anterior y le pasas la variable así:

Código PHP:

header('Location: web_anterior.php?img='.$newfilename);
 

2. Ahora desde la web donde se va a mostrar recoges la variable:

Código HTML:

<div style="background-image:url( <?php echo "upload/" . $_request[img]; ?>);" > 
div de fondo con la imagen 
</div>"
 

Si no te queda claro o no me he enterado bien de lo que quieres me comentas.

[jsusarevalo]

Iniciado por javioreto

Ahora me tendrías que decir donde esta el div que debe cambiar de fondo:

la clave esta en la variable:

Código PHP:

$newfilename
 

Lo único que deberías hacer es pasar esa variable al archivo donde la vayas a mostrar, por ejemplo:

1. Una vez subida y estando en la pag donde te dice ok o error en la subida puedes volver a la pag anterior y le pasas la variable así:

Código PHP:

header('Location: web_anterior.php?img='.$newfilename);
 

2. Ahora desde la web donde se va a mostrar recoges la variable:

Código HTML:

<div style="background-image:url( <?php echo "upload/" . $_request[img]; ?>);" > 
div de fondo con la imagen 
</div>"
 

Si no te queda claro o no me he enterado bien de lo que quieres me comentas.

Hola javioreto. Muchas gracias.

El div que debe cambiar el fondo es el siguiente:

Código HTML:

<div style="float:left;" id="seccion-elevador">
        
        <script type="text/javascript">
        var totalSillas=0;
$("#botonSilla").click(function(){
    $("#seccion-elevador").append("<div id='silla"+totalSillas+"' class='silla'><div class='sCerrar'>X</div></div>");
    $("#silla"+totalSillas).resizable().draggable({ containment: "#seccion-elevador", scroll: false });
    totalSillas++;
    
    $(".sCerrar").click(function(){
        $(this).parent().remove();
    });
});
		</script>
       
      </div> 

Como podrás observar, el fondo está establecido en el CSS, por lo que habrá que cambiarlo ahí.

Código HTML:

#seccion-elevador {
    background: url("http://eni-lift.es/images/salon.jpg") no-repeat scroll 0 0 #FFFFFF;
    height: 500px;
    margin: 0;
    width: 700px;
	position:relative;
}
#seccion-elevador .silla {
    border: 1px dotted #000000;
    width: 100px;
    height: 290px;
    top: 20px;
    left: 220px;
    position: absolute;
    background: url("http://eni-lift.es/images/elevador.png") no-repeat scroll 0 0 transparent;
    background-size:100%;
    cursor: move;
}
#seccion-elevador .silla .sCerrar {
    float: right;
    cursor: pointer;
    font-weight:bold;
    font-size: 10px;
    padding: 3px;
}

No me queda muy claro el método que has comentado. Dónde tendría que poner el código para ir a la página anterior? En un principio quiero que todo se realice en la misma página, pero si hay otra forma más sencilla no me importa cambiarlo.

Gracias por tu ayuda.

[javioreto]

Aunque el fondo este puesto en un archivo css externo tu puedes forzar al div a tomar un nuevo valor de background:

Código HTML:

<div style="float:left;" id="seccion-elevador">
        
        <script type="text/javascript">
        var totalSillas=0;
$("#botonSilla").click(function(){
    $("#seccion-elevador").append("<div id='silla"+totalSillas+"' style='background-image: url(<?php echo $_request[img]; ?>);' class='silla'><div class='sCerrar'>X</div></div>");
    $("#silla"+totalSillas).resizable().draggable({ containment: "#seccion-elevador", scroll: false });
    totalSillas++;
    
    $(".sCerrar").click(function(){
        $(this).parent().remove();
    });
});
        </script>
       
      </div>
 

[jsusarevalo]

Iniciado por javioreto

Aunque el fondo este puesto en un archivo css externo tu puedes forzar al div a tomar un nuevo valor de background:

Código HTML:

<div style="float:left;" id="seccion-elevador">
        
        <script type="text/javascript">
        var totalSillas=0;
$("#botonSilla").click(function(){
    $("#seccion-elevador").append("<div id='silla"+totalSillas+"' style='background-image: url(<?php echo $_request[img]; ?>);' class='silla'><div class='sCerrar'>X</div></div>");
    $("#silla"+totalSillas).resizable().draggable({ containment: "#seccion-elevador", scroll: false });
    totalSillas++;
    
    $(".sCerrar").click(function(){
        $(this).parent().remove();
    });
});
        </script>
       
      </div>
 

He hecho este cambio que me comentas, pero no funciona. La imagen se sube al servidor, pero no cambia el fondo de la div.

Por otro lado no se donde ubicar

Código PHP:

  header('Location: web_anterior.php?img='.$newfilename);  
   

Gracias!

[jsusarevalo]

alguna ayuda? No consigo dar con la solución al problema. La imagen se carga en el servidor correctamente pero soy incapaz de saber cómo hacer para que se cambie por el background en el CSS al subirla, y que al abandonar la página, vuelva la imagen de prueba establecida como estandar.

Gracias por vuestra ayuda

[jsusarevalo]

alguien que me ayude por favor? Llevo dos días intentando con diferentes códigos pero no doy con la solución. Se agradece vuestra ayuda!

Gracias!

[javioreto]

Buenas,

El problema de todo esto es que no conozco todo el código de tu programa. Es decir, necesito tener integro el archivo donde está el div al que cambiar el background y el archivo donde esta el script de carga.

Si tienes posibilidad mete esos dos archivos php en un zip y súbelo a tu hosting. Luego pon la url para que lo pueda descargar y arreglar.

[jsusarevalo]

Iniciado por javioreto

Buenas,

El problema de todo esto es que no conozco todo el código de tu programa. Es decir, necesito tener integro el archivo donde está el div al que cambiar el background y el archivo donde esta el script de carga.

Si tienes posibilidad mete esos dos archivos php en un zip y súbelo a tu hosting. Luego pon la url para que lo pueda descargar y arreglar.

Muchas gracias javioreto por contestar tan rápidamente! :) Aquí tienes el archivo.

[URL="https://www.dropbox.com/s/e93xditw52p9lj5/elevador-casa.php"]https://www.dropbox.com/s/e93xditw52p9lj5/elevador-casa.php[/URL]

Como verás está todo el código en la misma pagina php.

Los CSS que afectan a esa div son los siguientes:

Código HTML:

#seccion-elevador {
    background: url("http://eni-lift.es/images/salon.jpg") no-repeat scroll 0 0 #FFFFFF;
    height: 500px;
    margin: 0;
    width: 700px;
	position:relative;
}
#seccion-elevador .silla {
    border: 1px dotted #000000;
    width: 100px;
    height: 290px;
    top: 20px;
    left: 220px;
    position: absolute;
    background: url("http://eni-lift.es/images/elevador.png") no-repeat scroll 0 0 transparent;
    background-size:100%;
    cursor: move;
}
#seccion-elevador .silla .sCerrar {
    float: right;
    cursor: pointer;
    font-weight:bold;
    font-size: 10px;
    padding: 3px;
}

Muchas gracias por tu ayuda!

[javioreto]

Bueno, ya esta solucionado. Me debes una o al menos algún voto jeje

http://gestor.abi2burgos.es/elevador-casa.rar

[jsusarevalo]

Muchísimas gracias javioreto!!!! te debo lo que haga falta! y el voto por descontado! :D