2 Replies - 343 Views - Last Post: 25 May 2017 - 02:54 PM

#1 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Get All File Names from File Input

Posted 25 May 2017 - 08:57 AM

I am wanting to get all of the names from a file input element that accepts multiple files and create a new tr and td with the name as the text content. This is how my markup looks like:
<body>
  <form>
    <div class="form-group">
      <label class="control-label">Adobe Files</label>
      <input type="file" accept=".pdf" multiple required />
    </div>
  </form>
  <div class="table-responsive">
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <th>Name </th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</body>


And this is what I am using for my JQuery:
$(document).ready(function(){
  $('input[type="file"]:first').on('change', function() {
    $(this).files.each(function(index) {
      $('tbody:first').append('<tr><td>' + $(this).val() + '</td></tr>');
    });
  });
});


Whenever I attempt to run the code, it launches the file dialog prompt correctly, but whenever I click on the OK button nothing happens.

Is This A Good Question/Topic? 0
  • +

Replies To: Get All File Names from File Input

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5076
  • View blog
  • Posts: 13,700
  • Joined: 18-April 07

Re: Get All File Names from File Input

Posted 25 May 2017 - 12:17 PM

Just a few minor tweaks. I think you were just selecting the items incorrectly. Here is a codepen with your code modified.

https://codepen.io/anon/pen/ZKPZXG

I display the name of the file selected, but you have a few properties that can work for you here... https://www.w3school..._fileupload.asp Just look under the "Input FileUpload Object Properties" section.

Hope this works for you. :)

This post has been edited by Martyr2: 25 May 2017 - 12:18 PM

Was This Post Helpful? 1
  • +
  • -

#3 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Re: Get All File Names from File Input

Posted 25 May 2017 - 02:54 PM

Awesome, thank you.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1