HTML and Javascript detect if input contains a file?

Question

Hello I have the following code that allows the user to select a file and upload it to the server:

 <form action="postphp.php" method="post" enctype="multipart/form-data">

         <input id="videoage" type="file" name="video" style="margin-left:-242px;margin-top:10px;opacity:0;">
         <label for="videoage" id="labelvideo">Choose Video...</label>
 </form>

It works great but when the user selects a file I want the 'choose video...' text on the input to change to 'example.mp4'. Is this possible using javascript if so how can I do that? Thanks.

You need to provide more code.

Black
– Black

2016-10-14 15:29:12 +00:00
Commented Oct 14, 2016 at 15:29 — Black
– Black, Commented Oct 14, 2016 at 15:29

Mr Lister · Accepted Answer · 2016-10-20 18:21:12Z

1

You can write in your script:

 jQuery(function($) {
  $('input[type="file"]').change(function() {
    if ($(this).val()) {
      var filename = $(this).val().split('\\').pop();
      $(this).closest('.file-choose').find('.file-name').html(filename);
    }
  });
});

where file-choose and file_name are the classes added in your <form> and <label> respectively.
Please check the snippet here.

edited Oct 20, 2016 at 18:21

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Oct 14, 2016 at 15:57

jayantish

4541 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML and Javascript detect if input contains a file?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related