How to see if a "file" input file has been selected?

Asked

Viewed 5,577 times

3

Is there any way to know if the file type input has any file already loaded, ready to be sent?

I want to make a condition where if you have some file to upload in the first input, then show an add button plus a file type input and so on.

It is possible?

javascript jquery html css

2 answers

4


You just need to, at the event change() of your <input type=file> check the value of it, if it is different from empty, show the add another button, which would be hidden until then(guess) and add an event of click() to him to add another <input type=file> to your document, which would be:

function verificaMostraBotao(){
    $('input[type=file]').each(function(index){
        if ($('input[type=file]').eq(index).val() != ""){
            $('.hide').show();
        }
    });
}

$('input[type=file]').on("change", function(){
  verificaMostraBotao();
});

$('.hide').on("click", function(){
    $(document.body).append($('<input />', {type: "file" }).change(verificaMostraBotao));
    $('.hide').hide();
});

And HTML would be this:

<input type=file>
<input type=button class=hide value="Adicionar outro">

With proper css to hide button:

.hide {
    display: none;
}

Example in Jsfiddle

  • That’s right, Paul, just like that. If the guy clicked to add on the first one he wanted the add-plus button to disappear and appear only when the next tbm input is loaded. It is possible?

  • ready @Jeffersonalison

  • 1

    That boy, hehe... once again Thank you!

  • I’m here for this :) Arrange

2

You can use the input change event to know when some file is selected:

<script type="text/javascript">
  $(function() {
     $("input:file").change(function (){
       var fileName = $(this).val();
       if (fileName)
       {
          // adicionar novo input onde você quiser
          $(this).after('<input type="file" name="'+$(this).attr("name")+'" />');
       }
     });
  });
</script>

Reference in the OS in English... then it’s worth checking out.

Browser other questions tagged javascript jquery html css

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