[SOLUCIONADO] Cambiar fondo de div con imagen subida al servidor con php

crea3d · #1 (**permalink**) 06/02/2016, 22:31

Estimados amigos tengo los siguientes archivos:

subir_archivo.php

Código HTML:

<!DOCTYPE html>
<html lang="es">
	<head>
		<title></title>
		<meta charset="utf-8" />

		<style>
			.tarjeta {
				border: 1px solid black;
				display: block;
				float: left;
				height: 317px;
				margin-left: -1px;
				margin-top: -1px;
				margin-right: 58px;
				margin-bottom: 16px;
				position: relative;
				width: 503px;
				overflow: hidden;
			}
		</style>

	</head>
   
	<body>
		<!-- El tipo de codificación de datos, enctype, DEBE especificarse como sigue -->
		<form enctype="multipart/form-data" action="subir_imagen.php" method="POST">
		    <!-- MAX_FILE_SIZE debe preceder al campo de entrada del fichero -->
		    <input type="hidden" name="MAX_FILE_SIZE" value="5000000" />
		    <!-- El nombre del elemento de entrada determina el nombre en el array $_FILES -->
		    Enviar este fichero: <input name="fichero_usuario" type="file" />
		    <input type="submit" value="Enviar fichero" />
		</form>

		<div class="tarjeta"></div>

	</body>
</html>

subir_imagen.php

Código PHP:

  <?php

// En versiones de PHP anteriores a la 4.1.0, debería utilizarse $HTTP_POST_FILES en lugar

// de $_FILES.

 
$dir_subida = '/xampp/htdocs/jireh/uploads/';

$fichero_subido = $dir_subida . basename($_FILES['fichero_usuario']['name']);

 
echo '<pre>';

if (move_uploaded_file($_FILES['fichero_usuario']['tmp_name'], $fichero_subido)) {

    echo "El fichero es válido y se subió con éxito.\n";

} else {

    echo "¡Posible ataque de subida de ficheros!\n";

}

 
echo 'Más información de depuración:';

print_r($_FILES);

print_r($fichero_subido);

 
print "</pre>";

 
?>

Mi consulta es la siguiente:
como puedo aplicar como fondo del div tarjeta haciendo uso del estilo background-image la imagen que acabo de subir al servidor con php?

Les agradeceria su muy importante ayuda.

pateketrueke · #2 (**permalink**) 06/02/2016, 22:50

No puedes "aplicar" el fondo con PHP, pero sí puedes imprimir el CSS que necesitas:

Código PHP:

Ver original<style>
.foo { background-image: url(<?php echo $la_ruta_de_la_imagen_que_subiste; ?>); }
</style>

crea3d · #3 (**permalink**) 06/02/2016, 22:58

Claro, entiendo.
Pero como paso la ruta de la imagen que subi desde subir_imagen.php a subir_archivo.php para imprimir el estilo css.

Me dejo entender?

pateketrueke · #4 (**permalink**) 06/02/2016, 23:40

Puedes usar cualquier medio para almacenar dicho dato: archivos de texto, base de datos, sesiones, cookies, etc.

crea3d · #5 (**permalink**) 07/02/2016, 00:22

Gracias por tu respuesta, lo que pasa es que no se mucho de php y me seria de mucha ayuda si me dijeras como? que tengo que añadir. Es por eso que puse el contenido de los dos archivos, tal vez si lo uno ambos en un solo archivo el asunto sea mas simple, no se, por favor ayúdenme.

Probe con sesiones pero al irse al archivo php que procesa la petición, no retorna al que hizo la solicitud y tengo que retornar manualmente.

pateketrueke · #6 (**permalink**) 07/02/2016, 01:30

Por favor, consulta el manual de sesiones: http://www.php.net/manual/es/book.session.php

Cita:

Probe con sesiones pero al irse al archivo php que procesa la petición, no retorna al que hizo la solicitud y tengo que retornar manualmente.

La redirección la puedes hacer con header(), consulta el manual.

crea3d · #7 (**permalink**) 07/02/2016, 01:48

he hecho la siguiente modificación, meti todo en un solo archivo php que funciona bien solo que no actualiza el background del div por la imagen subida.

subir.php

Código PHP:

  <?php 

$dir_subida = '/xampp/htdocs/jireh/uploads/';

$nombre_archivo = basename($_FILES['fichero_usuario']['name']);

$fichero_subido = $dir_subida . basename($_FILES['fichero_usuario']['name']);

move_uploaded_file($_FILES['fichero_usuario']['tmp_name'], $fichero_subido);

echo "$nombre_archivo";

?>

 
<!DOCTYPE html>

<html lang="es">

    <head>

        <title></title>

        <meta charset="utf-8" />

 
        <style>

            .tarjeta {

                border: 1px solid black;

                display: block;

                float: left;

                height: 317px;

                margin-left: -1px;

                margin-top: -1px;

                margin-right: 58px;

                margin-bottom: 16px;

                position: relative;

                width: 503px;

                overflow: hidden;

            }

        </style>

 
    </head>

   

    <body>

        <!-- El tipo de codificación de datos, enctype, DEBE especificarse como sigue -->

        <form enctype="multipart/form-data" action="" method="POST">

            <!-- MAX_FILE_SIZE debe preceder al campo de entrada del fichero -->

            <input type="hidden" name="MAX_FILE_SIZE" value="5000000" />

            <!-- El nombre del elemento de entrada determina el nombre en el array $_FILES -->

            Enviar este fichero: <input name="fichero_usuario" type="file" />

            <input type="submit" value="Enviar fichero" />

        </form>

 
        <div class="tarjeta" style="background-image:url(uploads/<? echo '$nombre_archivo' ?>)"></div>

 
    </body>

</html>

pateketrueke · #8 (**permalink**) 07/02/2016, 12:52

El código que usas está mal:

Código PHP:

Ver original<? echo '$nombre_archivo' ?>

1. Siempre debes usar <?php y no sólo <?
2. Las comillas simples no permiten evaluar variables

Corrección:

Código PHP:

Ver original<?php echo $nombre_archivo; ?>

crea3d · #9 (**permalink**) 08/02/2016, 14:59

Muchas gracias pateketrueke, gracias a tu ayuda lo logre.