Execute "Send file" without having to click the input file

Question

Execute "Send file" without having to click the input file

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

Example:

When I click on my "camera" icon:

Insteadofthatlittle"Select file" box appear:

Ineedyoutoopenthe"send file" box directly:

HTMLicon

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

Form HTML

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

javascript html

asked by anonymous 06.03.2018 / 17:04

2 answers

1

You can do 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><iclass="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>

06.03.2018 / 17:13

"If (a == b):" or "if a == b:" in Python, which one is correct? Replace jquery with pure javascript

score 3 · Accepted Answer

Create a label and place the icon and input file inside:

<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 input file has a id and in label put for="id_do_input" , as shown in the example above.

And in CSS, hide 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>