Skip to main content

How to get file extension using JavaScript and JQuery

Before uploading any files can be difficult as we have to manage those file using server side scripts.
There must be some ways to find the file type or file extension of uploaded files using JavaScript or JQuery.

It’s mandatory to find the file extension before we upload unwanted files to the server.

In this article we will see some different approaches to find out file extension using JavaScript or JQuery.

1) Using JavaScript string ‘replace’ function with Regular Expression.

Generally replace() function in JavaScript will replace given string in original string.
Syntax of Replace function

string.replace(searchString, newString).

Replace() function will accepts two parameters to replace one string into another string. In our case we will pass first parameter as a full file name and second parameter will be blank string.

Now we will use regular expression to get the filename till .(dot) in the filename and then we will replace it will blank string so only file extension will be remaining as a result.

Let’s see the example

var fileName = 'Tarun.jpg';
var extension = fileName.replace(/^.*\./, '');
console.log (extension);

Below is the output of the above code

I know regular expression is little bit confusing, so let’s see how it works. If we write “^.*” it means all the characters. If we write “\.” it means till it reaches the .(dot). If we put both expression together means get all the characters till it reaches the .(dot).
Put that both regular expression enclosed forward slash “/” one at the beginning and one at the end.
So full expression will be like below

/^.*\./

This was the first approach. Now let’s see at second approach

2) Using ‘substr()’ and ‘lastIndexOf()’ function of the JavaScript.

If we are using two JavaScript function together then also it will return file extension. ‘substr()’ function will extract specific value from a given string. ‘lastIndexOf()’ function will return lastIndexOf given character in the target string.

Let’s see the syntax of substr function

string.substr(startIndex, Length)

In the above syntax first parameter startIndex will be integer value which will indicate the starting point of the string and second parameter Length represents length to be extracted from the target string.

Now let’s see the syntax of the lastIndexOf function

string.lastIndexOf(searchString, startIndex);

In the above syntax first parameter searchString will be either character or string which we want to find from the target string and second parameter startIndex indicates from where we want to start in the target string.

Now let’s see the example to get the file extension

var fileName = 'Tarun.jpg';
var extension = fileName.substr((fileName.lastIndexOf('.') + 1));
console.log (extension);

Below is the output of the above code

3) Using ‘split’ and ‘pop’ function of the JavaScript

The JavaScript ‘split()’ function will split the string and returns an array of the words by separator.

Let’s see the syntax of the split function

string.split(separatorChar, limitOfSplitString);

In the above given syntax first parameter is the separatorChar will be used to split the string from that char and second parameter is the limitOfSplitString which will decides how many elements we want to retrieve.

The first parameter can be any character used to split the string and the second parameter is a numeric value defining the number of items returned as an arrays.

pop function will return the last element of an array. It can be only used with the array.

Now let’s split the filename with .(dot) and convert filename to an array, after that we will use pop function to get the last element of the array which is an extension.

var fileName = 'Tarun.jpg';
var extension = fileName.split('.').pop();
console.log (extension);

Below is the output of the above code

Conclusion

In the above all examples we have seen how to get file extension using regular expression and using various JavaScript function like split, pop, substr, lastIndexOf. If you have any query please write into the comment box or use contact us page.

See you in the next article.

Happy coding.

Exporting/Download HTML Table as CSV File Using jQuery

Whenever we are working on any project generally we need to display data into the grid, and often we need to download those records as a excel or CSV file. So in our today’s article we will see how to download/export html table data as CSV file using JQuery.

In the jQuery there is a plugin called “tabletoCSV” which is very easy to use and it will done the task done.

Now lets see below I have created a simple “HTML table with Export as CSV button”

<body>
 <form id="myform" runat="server">
 <div>
 <table id="tabletodownload" style="border:1px solid #000;">
 <thead>
 <tr> <th> Customer Name </th> <th> Order Value </th> <th> Ordered On </th> </tr>
 </thead>
 <tbody>
 <tr> <td> Tarun </td> <td> $ 5,000 </td> <td> 7, Oct 2017 </td> </tr>
 <tr> <td> James <td> <td> $ 4,000 </td> <td> 10, Oct 2017 </td> </tr>
 <tr> <td> Vijay </td> <td> $ 3,000 </td> <td> 29, Sept 2017 </td> </tr>
 <tr> <td> Andy </td> <td> $ 2,000 </td> <td> 22, Oct 2017 </td> </tr>
 <tr> <td> Andrew </td> <td> $ 1,000 </td> <td> 29, Oct 2017 </td> </tr>
 </tbody>
 </table>
 <br />
 <button type="button" id="btnDownload"> Download as CSV</button>
 </div>
 </form>
</body>

 

Use below script to download the html table as csv file

<script type="text/javascript">
$(document).ready(function() {
$('#btnDownload').click(function() {
$("#tabletodownload").tableToCSV({
filename: 'CustomerList'
});
});
});
</script>

If we run this page in the browser then it will display like below screen and you can export tables as CSV by clicking on the ‘Download as CSV‘ button.

For the above example we need to reference to js file 1 is the JQuery file and another is the “tabletoCSV” plugin js file.

<script type="text/javascript" src="jquery.min.js" />
<script type="text/javascript" src="/jquery.tabletocsv.js" />

Output will be look like as below

 

You can download working example from this link

Working with select or drop-down using jQuery

In this article we are going to learn some operation on the select box using jQuery as below.

1. Add new option to a select-element with jQuery


<select id="ddlStatus"></select>

<script type="text/javascript" language="javascript" >
var status = new Array();

status.push("<option value=\"In Process\">In Process</option>");
status.push("<option value=\"On Hold\">On Hold</option>");

$("#ddlStatus").html(status.join(''));

</script>

2. Retrieve the selected single value from the select box with jQuery


$('#ddlStatus').val();

3. Retrieve the multiple selected value from the select box with jQuery


$('#ddlStatus option:selected').each(function(counter, option){
console.log($(option).val());
});

4. Sometime if you don’t want to retrieve selected value and want to get selected text then use the below code


$('#ddlStatus option:selected').text();

5. Retrieve the multiple selected text from the select box with jQuery

If you have a multiple choice element you should go with this code:

$('#ddlStatus option:selected').each(function(counter, option){
console.log($(option).text());
});

6. If you want to remove a specific option from the select box using jQuery

Below code will remove the option which has the value = 2 from the using jQuery


$('#ddlStatus option[value=2]').remove();

7. Clear a selectbox using jQuery

$('#ddlStatus').html('');

hope this will help someone 🙂