Como reemplazar input file con imagen

[helacer]

Buenas

Tengo un formulario . entre los campos tengo un input file... la idea es que el usuario no de click directamente al input sino que este salga oculto y al dar click sobre la imagen pueda reemplazarla por otra.


Tengo esto.

Código HTML:

<label for="form_picture">
            <img id="img_form" src="icon_img.jpg' />
</label>
<input type="file" id="form_picture"> <!-- Este input se ocultara con css --> 

Teniendo el lavel con el mismo id del input ya funciona que cuando do y click en la imagen se abre la ventana para buscar la imagen... pero al seleccionar la imagen no me asigna el valor al input.... y cuando recibo con PHP los datos del form el campo de la imagen viene vacio :(


// También intente con un trigger jquery para que cuando diera click sobre la imagen simulara el click sobre el input pero pasa lo mismo si abre la ventana para seleccionar la imagen a cargar pero nunca asigna el archivo al input!!!


Saben que debo hacer para que esto funcione? gracias!

[jolijun]

Te dejo el ejemplo que hice en jsfiddle: https://jsfiddle.net/nhfggdva/

Código HTML:

<div class="input-file">
    <label for="file1"></label>
    <input id="file1" type="file" />
</div>
 

Código CSS:

.input-file {
     width: 200px;
     height: 200px;    
}
 
.input-file label {
     width: 100%;
     height: 100%;
     display: block;
     background: transparent url(http://vignette4.wikia.nocookie.net/fable/images/5/53/Image_Upload.png/revision/latest?cb=20101002231116) no-repeat center center;
}
 
.input-file input[type=file] {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}