Open input from icon font awesome

Question

Open input from icon font awesome

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

What happens is that I want to click on the fa-paperclip icon to open the window to choose which files I want to attach.

I currently have this:

<html>

<head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>

<a href = "#"><i class = "fa fa-paperclip"></i></a>

Que al dar click en el icono me abra el input file: 
<input type = "file">



</body>

</html>

Greetings.

This was the result:

function open () {

var file = document.getElementById ("file"). click ();

}

  <i class = "fa fa-paperclip fa-2x text-blue" style = "cursor: pointer;" onclick="abrir()"></i>

  <input id = "file" type="file" style = "display: none;">

Thank you.

mysql javascript php ajax font-awesome

asked by Noctis 14.11.2018 в 18:43

source

2 answers

Avoid duplicate values C # Add amounts in stock

score 1 · Answer 1

You can use JS to call the input event:

$("i").click(function () {
  $("input[type='file']").trigger('click');
});

$('input[type="file"]').on('change', function() {
  var val = $(this).val();
  $(this).siblings('span').text(val);
})

input {
  display: none;
}

.fa {
  cursor: pointer;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>

<i class="fa fa-paperclip"></i> Clic en el ícono para subir
  <input type="file">



</body>

</html>

score 0 · Answer 2

You can add an id to the input and call the event click like this:

function abrir() {
  var file = document.getElementById("file").click();
  
}

<html>

<head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>

<a href = "#"><i class = "fa fa-paperclip" onclick="abrir()"></i></a>

Que al dar click en el icono me abra el input file: 
<input id="file" type = "file">



</body>

</html>