0

We are using <input type='file' multiple> HTML to attach multiple attachments. It's showing 2 files if I upload 2 files; we need to show file names instead number.

How to Parse/Save the files using jQuery.

enter image description here

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
gokulnath
  • 23
  • 4
  • Does this answer your question? [Get the filename of a fileupload in a document through JavaScript](https://stackoverflow.com/questions/1804745/get-the-filename-of-a-fileupload-in-a-document-through-javascript) – Heretic Monkey Nov 29 '22 at 20:14
  • If there are multiple files, simply map them: `var filenames = myFile.files.map((f) => f.name).toString()` – Heretic Monkey Nov 29 '22 at 20:16

1 Answers1

1

You can try something like this, then you can start playing with CSS to hide that input, etc...

$(function() {
  const uploader = $('#uploader');
  const list = $('#list');
 
  $(uploader).on('change', function() {
    const filesLength = uploader.get(0).files.length;
    
    for (let i = 0; i < filesLength; i++) {
      console.log(`File number ${i} has this name >> ${this.files[i].name}`);
      list.append(`<li> ${this.files[i].name} </li>`)
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input 
  type="file" 
  multiple
  name="file" 
  id="uploader" 
/>

<div style="margin: 12px 0 0 0;">
  <b>Uploaded files:</b>
  <ul id="list"></ul>
</div>
jonu29
  • 389
  • 1
  • 11
  • Thank you for your response, I am doing the same way as you suggested, We need to loop throw the files to save them to the database. I know we get the file metadata by using FileReader . but How to loop the files attached with File control on the final Submit button click (I have attached 2 files, 2 files are showing in List but while saving it saved the last file 2 times . I looped the file input control, not the List) and send them to file reader. ? Please suggest. – gokulnath Nov 30 '22 at 05:27