Get the file extension in the JavaScript

Question

I have a problem checking what is an extension in my multiple input files. I am added pathinfo in the javascript and alert to check the file extension, but cannot work. Below is my coding:

<!DOCTYPE html> <html> <body> <input type="file" name="vasplus_multiple_files" id="vasplus_multiple_files" accept="application/msword, application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/*" multiple="multiple"/> <input type="submit" name="next" class="action-button" value="Submit" onclick="sendFunc_web()"/> <script> function sendFunc_web(){ var inp = document.getElementById('vasplus_multiple_files'); var count = inp.files.length; for (var i = 0; i < inp.files.length; ++i) { var num = i+1; var name = inp.files.item(i).name; var ext = pathinfo(name, PATHINFO_EXTENSION); alert("here is a file path: " + ext); } } </script> </body> </html>

For example, if the file names are abcdefg.pdf and haha.jpeg, I want to alert twice data to show extensions are pdf and jpeg``.

The result might be like below the pictures;

Hope someone can guide me which part I am getting wrong.

Lars Flieger · Accepted Answer · 2021-01-30 12:59:23Z

Try using the following solution

function sendFunc_web() { var inp = document.getElementById('vasplus_multiple_files'); var count = inp.files.length; for (var i = 0; i < inp.files.length; ++i) { var num = i + 1; var name = inp.files.item(i).name; var ext = name.split('.'); ext = ext[ext.length - 1]; alert("here is a file path: " + ext); } }

<input type="file" name="vasplus_multiple_files" id="vasplus_multiple_files" accept="application/msword, application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/*" multiple="multiple" /> <input type="submit" name="next" class="action-button" value="Submit" onclick="sendFunc_web()" />

Lars Flieger · Accepted Answer · 2021-01-30 13:00:08Z

You can split the name file by dot, and access last index:

function sendFunc_web() { var inp = document.getElementById('vasplus_multiple_files'); var count = inp.files.length; for (var i = 0; i < inp.files.length; ++i) { var num = i + 1; var name = inp.files.item(i).name; console.log(name) let ext = ext[ext.length - 1] console.log(ext) } }

tripleee · Accepted Answer · 2023-04-27 11:21:52Z

0

Short one:

fileName.substring(fileName.lastIndexOf("."))

edited Apr 27, 2023 at 11:21

tripleee

192k37 gold badges318 silver badges367 bronze badges

answered Apr 27, 2023 at 10:25

Strangefruit

1

Comments

MMMahdy-PAPION · Accepted Answer · 2022-02-09 16:57:47Z

RegEx (Fast & Accurate) version of pathInfo:

function pathInfo(s) { s=s.match(/(.*?\/)?(([^/]*?)(\.[^/.]+?)?)(?:[?#].*)?$/); return {path:s[1],file:s[2],name:s[3],ext:s[4]}; } var sample='folder/myfolder/another/file.min.js?query=1'; var result=pathInfo(sample); console.log(result); /* { "path": "folder/myfolder/another/", "file": "file.min.js", "name": "file.min", "ext": ".js" } */ console.log(result.ext);

Collectives™ on Stack Overflow

Get the file extension in the JavaScript

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related