- To get file extensions using JavaScript, there are so many ways. The most useful ones are:
- split() and pop() method
- substring() and lastIndexOf() method
- match() method with regular expression
- Using split() and pop() method:
The full filename is first obtained by selecting the file input and getting its value property. This returns the filename as a string.
By the help of split() method, we will split the filename into 2 parts. The first part will be the filename and the second part will be the extension of the file.
The extension can then be got by popping from the array the last string with the pop() method. This is hence the file extension of the file selected.
Syntax:
fileName.split(separator, limit).pop();
Example:
<!DOCTYPE html><html><head><title>How to get file extensions using JavaScript? </title></head><bodystyle="text-align: center;"><h1style="color: green;">neveropen</h1><b>Here we will get "Extension" of selected file</b><p>Select a file and click on the buttonto check the file extension.</p><form><inputtype="file"id="file1"/><inputtype="button"value="Check Extension"onclick="checkFileExtension();"/></form><p>The file extension is: <spanclass="output"></span></p><scriptlanguage="javascript">function checkFileExtension() {fileName = document.querySelector('#file1').value;extension = fileName.split('.').pop();document.querySelector('.output').textContent = extension;};</script></body></html>Output:
- Using substring() and lastIndexOf() method:
The full filename is first obtained after that substring() method is used to return the part of a string between the start and end indexes.The starting index is given by using the lastIndexOf() method. This returns the index in the string where the string passed last occurs. The last index can be found by passing a period(.) to this method. The index is passed on to the substring() method, which returns the string from the period(.) to the end. This is the file extension.
Syntax:
fileName.substring(fileName.lastIndexOf(searchvalue, start);
Example:
<!DOCTYPE html><html><head><title>How to get file extensions using JavaScript? </title></head><bodystyle="text-align: center;"><h1style="color: green;">neveropen</h1><b>Here we will get "Extension" of selected file</b><p>Select a file and click on the buttonto check the file extension.</p><form><inputtype="file"id="file1"/><inputtype="button"value="Check Extension"onclick="checkFileExtension();"/></form><p>The file extension is: <spanclass="output"></span></p><scriptlanguage="javascript">function checkFileExtension() {fileName = document.querySelector('#file1').value;extension = fileName.substring(fileName.lastIndexOf('.') + 1);document.querySelector('.output').textContent = extension;};</script></body></html>Output:
- match() method with regular expression:
Regular expressions can be used to extract the file extension from the full filename. A new RegExp object is created with the regular expression “[^.]+$”. The caret(^) marks the start of a string. The period(.) after the caret specifies that the string is selected after the period. The plus(+) quantifier selects one or more words. The dollar($) is used to specify the end of the line. This expression selects the string after the period.
The match() method is used to return the part of the string which matches the regular expression passed to it as a parameter. The full filename is passed to this method and the regular expression returns only the file extension.
Syntax:
fileName = document.querySelector('#file1').value; regex = new RegExp('[^.]+$'); extension = fileName.match(regex);Example:
<!DOCTYPE html><html><head><title>How to get file extensions using JavaScript? </title></head><bodystyle="text-align: center;"><h1style="color: green;">neveropen</h1><b>Here we will get "Extension" of selected file</b><p>Select a file and click on the buttonto check the file extension.</p><form><inputtype="file"id="file1"/><inputtype="button"value="Check Extension"onclick="checkFileExtension();"/></form><p>The file extension is: <spanclass="output"></span></p><scriptlanguage="javascript">function checkFileExtension() {fileName = document.querySelector('#file1').value;regex = new RegExp('[^.]+$');extension = fileName.match(regex);document.querySelector('.output').textContent = extension;};</script></body></html>Output:
Above methods are described below one by one with the proper example.
