PHP - Abrir cuadro de dialogo para seleccionar imágenes

   
Vista:

Abrir cuadro de dialogo para seleccionar imágenes

Publicado por Juan (67 intervenciones) el 26/02/2014 12:58:03
Buenos días, como se puede hacer desde PHP para que al pulsar un botón se me abra un cuadro de dialogo y poder seleccionar una imagen, y devolver el nombre de esa imagen para luego poder copiarla en otro sitio.

Un saludo.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Abrir cuadro de dialogo para seleccionar imágenes

Publicado por Juan (67 intervenciones) el 26/02/2014 13:51:45
A lo que me refiero es a poner un botón como en el ejemplo que les dejo a continuación:

http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

Pero no se como agregarlo a mi página. Hago lo que pone y no me sale bien.

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Abrir cuadro de dialogo para seleccionar imágenes

Publicado por xve (5522 intervenciones) el 26/02/2014 20:41:55
Hola Juan, la menera que utiliza este página que comentas, es un poco complicado, ya que tienes que poner el botón justo encima del input... prueba este código, lo he modificado un pelin para que funcione:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="es">
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        .fileUpload {
            position: relative;
            overflow: hidden;
            margin: 10px;
            width:100px;
            color: #ffffff;
            background-color: #0044cc;
            padding:10px;
            text-align:center;
        }
        .fileUpload input.upload {
            position: absolute;
            top: 0;
            bottom:0;
            right: 0;
            margin: 0;
            padding: 0;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            filter: alpha(opacity=0);
        }
    </style>
</head>
 
<body>
 
<form>
    <div class="fileUpload btn btn-primary">
        <span>Upload File</span>
        <input type="file" class="upload" />
    </div>
</form>
 
</body>
</html>

Por si te interesa, uno menos complicado, pero que utiliza jquery es: http://www.lawebdelprogramador.com/codigo/JQuery/2615-Dar_formato_al_selector_de_archivos.html

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Abrir cuadro de dialogo para seleccionar imágenes

Publicado por Juan (67 intervenciones) el 27/02/2014 09:24:43
Buenos días, me sigue sin funcionar.

He probado con el siguiente código también:

1
2
3
4
<div id="file_browse_wrapper">
          <span>Cambiar</span>
	  <input type="file" id="file_browse" accept="image/x-png, image/gif, image/jpeg" onchange="GetInputValue();">
     </div>

El archivo CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#file_browse_wrapper:hover {
	background: #D2D0D0; 
	background: -moz-linear-gradient(top, #D2D0D0 0%, #DDDBDB 100%);
	background: -webkit-linear-gradient(top, #D2D0D0 0%,#DDDBDB 100%); 
}
 
#file_browse_wrapper:active {
	background: #DCD9D9; 
	background: -moz-linear-gradient(top, #DCD9D9 0%, #F0E8E8 100%);
	background: -webkit-linear-gradient(top, #DCD9D9 0%,#F0E8E8 100%);
}
 
#file_browse{
	position: absolute;
	height: 30px;
	width: 140px;
/*    opacity:0.0;*/
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
       filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      cursor: pointer;
}

Y como pueden ver no se me centra el botón file dentro del DIV, alguien me sabría decir como centrarlo para que me aparezca dentro del div y centrado?

También que funcione en todos los navegadores.

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar