css - examples - Reemplazar tipo de entrada=archivo por una imagen

tooltip css

Question

Al igual que mucha gente, me gustaría personalizar el feo input type=file , y sé que no se puede hacer sin algunos hacks y / o javascript . Pero, en mi caso, los botones del archivo de carga son solo para cargar imágenes ( jpeg | jpg | png | gif ), así que me preguntaba si podría usar una imagen " clickable " que actuaría exactamente como un archivo de tipo de entrada (muestre el cuadro de diálogo y el mismo $ _FILE en la página enviada).
Encontré algunas soluciones here , y esta interesante también (pero no funciona en Chrome = /).

¿Qué hacen ustedes cuando quieren agregar un poco de estilo a sus botones de archivo? Si tiene algún punto de vista al respecto, simplemente presione el botón de respuesta;)

Answer 1

En realidad, se puede hacer en puro CSS y es bastante fácil ...

código HTML

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

Estilos CSS

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

La idea es posicionar la entrada absolutamente dentro de su etiqueta. establezca el tamaño de fuente de la entrada en algo grande, lo que aumentará el tamaño del botón "examinar". Luego, lleva un poco de prueba y error usando las propiedades negativas izquierda / arriba para ubicar el botón de exploración de entrada detrás de su etiqueta.

Cuando coloque el botón, configure el alfa en 1. Cuando haya terminado, vuelva a establecerlo en 0 (para que pueda ver lo que está haciendo).

Asegúrese de probar en todos los navegadores, ya que todos mostrarán el botón de entrada un tamaño ligeramente diferente.

Puede ver un ejemplo aquí (botón Agregar pista): http://rakmastering.com/upload/

Answer 2

Este es mi método si entendí tu punto

HTML

<label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src=''tools/img/upload.png''" onmouseout="this.src=''tools/img/upload2.png''" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

jQuery

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>

Answer 3

Esto funciona realmente bien para mí:

<div class="image-upload">
    <label for="file-input">
        <img src="placeholder.jpg"/>
    </label>

    <input id="file-input" type="file"/>
</div>

Con estilo:

.image-upload > input
{
    display: none;
}

Básicamente, el atributo para de la etiqueta hace que hacer clic en la etiqueta sea lo mismo que hacer clic en la entrada especificada .

Además, la propiedad de visualización establecida en none hace que la entrada del archivo no se represente en absoluto, ocultándola agradable y limpia.

Probado en Chrome, pero de acuerdo con la web debería funcionar en todos los principales navegadores. :)

EDITAR: se agregó JSFiddle aquí: https://jsfiddle.net/c5s42vdz/

Answer 4

Gran solución de @hardsetting, pero hice algunas mejoras para que funcione con Safari (5.1.7) en Windows

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>

He usado "visibility: hidden, width: 0" en lugar de "display: none" para safari y agregué "pointer-events: none" en la etiqueta img para que funcione si la etiqueta de tipo de archivo de entrada está en la etiqueta FORM. parece funcionar para mí en todos los principales navegadores. Espero que ayude a alguien.

Answer 5

La entrada en sí está oculta con visibilidad CSS: oculta.

Luego puede tener cualquier elemento que desee: anclaje o imagen ..., cuando se hace clic en el anclaje / imagen, activa un clic en el campo de entrada oculto, aparecerá el cuadro de diálogo para seleccionar un archivo.

EDITAR: en realidad funciona en Chrome y Safari, me acabo de dar cuenta de que no es el caso en FF4Beta

Answer 6

Puedes poner una imagen y hacerlo así:

HTML:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

JQuery:

$("#upfile1").click(function () {
    $("#file1").trigger(''click'');
});

CAVEAT : en IE9 e IE10 si activa el onclick en una entrada de archivo a través de javascript, el formulario se marca como ''peligroso'' y no puede ser submmitido con javascript, no estoy seguro si se puede enviar de manera tradicional.

Answer 7

Yo usaría SWFUpload o Uploadify . Necesitan Flash pero hacen todo lo que quieren sin problemas.

Cualquier solución basada en <input type="file"> que intente desencadenar el diálogo "abrir archivo" por medios distintos de hacer clic en el control real podría eliminarse de los navegadores por razones de seguridad en cualquier momento. (Creo que en las versiones actuales de FF e IE, ya no es posible desencadenar ese evento de forma programática).

Answer 8

es realmente simple, puedes probar esto:

$("#image id").click(function(){
    $("#input id").click();
});

Answer 9

Código de trabajo:

solo oculta la parte de entrada y hazlo así.

<div class="ImageUpload">
   <label for="FileInput">
      <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
   </label>

  <input id="FileInput" type="file" onchange="readURL(this,''Picture'')" style="cursor: pointer;  display: none"/>
</div>

Answer 10

        form input[type="file"] {
          display: none;
        }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title>Simple File Upload</title>
  <meta name="" content="">
</head>

<body>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <label for="fileToUpload">
      <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
    </label>
    <input type="File" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </form>
</body>

</html>

EJECUTAR SNIPPET o simplemente copiar el código anterior y ejecutarlo. Obtendrás lo que querías. Muy simple y efectivo sin javascript. ¡¡¡Disfrutar!!!