How to extract filename from a file input control - jQuery

How to get selected file name from input type file using jQuery. Topic: JavaScript / jQueryPrev|Next. Answer: Use the jQuery change() method.








jQuery change() method can be used to get the file name, file type, file size selected by the HTML form control <input type="file">. Let's check out an example to understand how it works:

HTML

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.  
  6.     <title>Jaya Krishna Miriyam</title>
  7.  
  8.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  9.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  10.     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  11.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  12.  
  13.     <script src="https://kit.fontawesome.com/1a2b0738bb.js" crossorigin="anonymous"></script>
  14.  
  15. </head>
  16.  
  17. <body>
  18.     <div class="main-container">
  19.         <form>
  20.             <div class="row">
  21.                 <div class="col-12 bg-light">
  22.                     <div class="icons text-center p-3">
  23.                         <a href="https://www.instagram.com/jayakrishna.miriyam/" class="text-dark">
  24.                             <i class="fa-brands fa-square-instagram"></i>
  25.                         </a>
  26.  
  27.                         <a href="https://www.youtube.com/channel/UCxiXTvcR3z8JSYY6ycuXmbg?sub_confirmation=1" class="text-danger">
  28.                             <i class="fa-brands fa-youtube"></i>
  29.                         </a>
  30.  
  31.                         <a href="https://www.facebook.com/jayakrishna.miriyam/" class="">
  32.                             <i class="fa-brands fa-square-facebook"></i>
  33.                         </a>
  34.                     </div>
  35.  
  36.                 </div>
  37.                 <div class="col-12 mt-5">
  38.                     <h4 class="text-center font-weight-bold text-dark">Upload Your Files</h4>
  39.                 </div>
  40.                 <div class="col-12">
  41.                     <div class="my-4 text-center">
  42.                         <input type="file" multiple id="fu" />
  43.                     </div>
  44.                 </div>
  45.             </div>
  46.             <div class="container">
  47.                 <table id="tableName" class="table d-none">
  48.                     <thead class="thead-light">
  49.                         <tr>
  50.                             <th scope="col">File Name</th>
  51.                             <th scope="col">File Type</th>
  52.                             <th scope="col">File Size</th>
  53.                         </tr>
  54.                     </thead>
  55.                     <tbody id="list">
  56.  
  57.                     </tbody>
  58.                 </table>
  59.             </div>
  60.         </form>
  61.     </div>
  62.  
  63.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  64.     <script>
  65. $('#fu').on('change', function() {
  66.       $('#list').empty();
  67.       var fu = $('#fu');
  68.       var lengths = fu[0].files.length;
  69.       var items = fu[0].files;
  70.       var frag = "";
  71.  
  72.       $('#tableName').removeClass('d-none');
  73.  
  74.       if (lengths > 0) {
  75.           for (var i = 0; i < lengths; i++) {
  76.               var fileName = items[i].name;
  77.               var fileSize = items[i].size;
  78.               var fileType = items[i].type;
  79.               frag = "<tr><th>" + fileName + "</th> <th>" + fileType + "</th> <th>" + fileSize + " bytes</th></tr>";
  80.  
  81.               $('#list').append(frag);
  82.           }
  83.  
  84.       }
  85.  
  86. })
  87.     </script>
  88.  
  89. </body>
  90.  
  91. </html>

CSS

  1. @import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');
  2.  
  3. .main-container {
  4.     height: 100vh;
  5. }
  6.  
  7. .icons {
  8.     font-size: 30px;
  9.  
  10. }
  11.  
  12. .icons a {
  13.     margin-right: 15px;
  14. }