Run "Send File" without having to click the input file

Asked

Viewed 972 times

0

Example :

When I click on my "camera icon" : img exemplo

Instead of appearing that little box of "Select File" : inserir a descrição da imagem aqui

I need you to open the "send file" box" : inserir a descrição da imagem aqui

HTML of the icon

<i class="material-icons icone-img">&#xE5CD;</i>

HTML form

<form class="form" method="POST" enctype="multipart/form-data">
    <input type="file" name="img_input" value="">
    <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

2 answers

3


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">&#xE5CD;</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">&#xE5CD;</i>
   </label>
    <input id="Bot_login" type="submit" name="Trocar_img" value="Trocar imagem">
</form>

1

You can do it like this:

$('i.icone-img').click(() => {
  $('[name="img_input"]').click();
})
input[type="file"] {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="material-icons icone-img">&#xE5CD;</i>

<form class="form" method="POST" enctype="multipart/form-data">
    <input type="file" name="img_input" value="">
    <input id="Bot_login" type="submit" name="Trocar_img" value="Trocar imagem">
</form>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.