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

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

Esto funciona muy bien para mí:

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

<div class="image-upload">
  <label for="file-input">
    <img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/>
  </label>

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

Básicamente, el atributo for 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 procese en absoluto, ocultándola de forma agradable y limpia.

Probado en Chrome, pero según la web debería funcionar en todos los navegadores principales. :)

EDITAR: JSFiddle agregado aquí: https://jsfiddle.net/c5s42vdz/

En realidad, se puede hacer en CSS puro 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 colocar 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 se necesita algo de prueba y error usando las propiedades negativas izquierda / superior para colocar el botón de búsqueda de entrada detrás de su etiqueta.

Al colocar el botón, configure el alfa en 1. Cuando haya terminado, vuelva a configurarlo en 0 (¡para que pueda ver lo que está haciendo!)

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

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 utilizado visibility: hidden, width:0en lugar de display: nonepara el tema de safari y añadido pointer-events: noneenimg la etiqueta para que sea trabajando si el tipo de archivo de entrada está en la etiqueta etiqueta FORM.

Parece que me funciona en todos los navegadores principales.

Espero que ayude a alguien.

Me gustaría utilizar SWFUpload o Uploadify . Necesitan Flash pero hacen todo lo que quieran sin problemas.

Cualquier <input type="file">solución alternativa que intente activar el cuadro de 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 activar ese evento mediante programación).

Este es mi método si entiendo 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>

es realmente simple, puedes probar esto:

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

En su lugar, puede 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');
});

AVISO : En IE9 e IE10, si activa el clic en la entrada de un archivo a través de javascript, el formulario se marca como 'peligroso' y no se puede enviar con javascript, no estoy seguro de si se puede enviar tradicionalmente.

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

Entonces puede tener cualquier elemento que desee - ancla o imagen ..., cuando se hace clic en el ancla / imagen, active 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, acabo de notar que no es el caso en FF4Beta

Código de trabajo:

simplemente oculta la parte de entrada y haz esto.

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

        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 copie el código anterior y ejecútelo. Obtendrás lo que querías. Muy simple y efectivo sin javascript. ¡¡¡Disfrutar!!!

He tenido muchos problemas con entradas ocultas y no visibles durante la última década, a veces las cosas son mucho más simples de lo que pensamos.

He tenido un pequeño deseo con IE 5,6,7,8 y 9 de no admitir la opacidad y, por lo tanto, la entrada del archivo cubriría la imagen de carga, sin embargo, el siguiente código css ha resuelto el problema.

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);  

El siguiente recorte se prueba en Chrome, IE 5,6,7,8,9,10, el único problema en IE 5 es que no admite el margen automático.

Ejecute el fragmento, simplemente copie y pegue el CSS y HTML modifique el tamaño a su gusto.

.file-upload{
	height:100px;
	width:100px;
	margin:40px auto;
	border:1px solid #f0c0d0;
	border-radius:100px;
	overflow:hidden;
	position:relative;
}
.file-upload input{
	position:absolute;
	height:400px;
	width:400px;
	left:-200px;
	top:-200px;
	background:transparent;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);  
}
.file-upload img{
	height:70px;
	width:70px;
	margin:15px;
}

<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>