0

Lo que pasa es que quiero que al presionar el icono de fa fa-paperclip me abra la ventana para escoger que archivos deseo adjuntar.

Actualmente tengo esto:

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

Saludos.

Este fue el resultado:

function abrir() {

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

Gracias.

2 respuestas 2

2

Puedes usar JS para llamar el evento del input:

$("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>

1
  • gracias tu respuesta junto con la otra me ayudo a resolver mi problema, saludos.
    – Noctis
    Commented el 14 nov. 2018 a las 18:43
1

Puedes agregar un id al input y llamar al evento click asi:

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>

1
  • gracias tu respuesta junto con la otra me ayudo a resolver mi problema, saludos.
    – Noctis
    Commented el 14 nov. 2018 a las 18:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.