Create a label
and place the icon and the input file
within:
<label for="tipofile" class="custom-file-upload">
<input id="tipofile" type="file" name="img_input" value="">
<i class="material-icons icone-img"></i>
</label>
It is necessary that the input file
have a id
and in the label
place for="id_do_input"
, as shown in the example above.
And in CSS, hide the input file
with:
#tipofile{
display: none;
}
Example:
#tipofile{
display: none;
}
/*só para exemplo*/
.icone-img{
width: 100px;
height: 100px;
background-image: url(https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg);
background-size: cover;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<form class="form" method="POST" enctype="multipart/form-data">
<label for="tipofile" class="custom-file-upload">
Clique na imagem:
<br>
<input id="tipofile" type="file" name="img_input" value="">
<i class="material-icons icone-img"></i>
</label>
<input id="Bot_login" type="submit" name="Trocar_img" value="Trocar imagem">
</form>
Just change the css input file as Hidden, and assign the event to any other element
– MarceloBoni