Open In App

How to get file input by selected file name without path using jQuery ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The task is to get the file input by selected filename without the path using jQuery. To select the file we will use HTML <input type=”file”>. After that, we will get the file name using the name property of the current event target files inside the jQuery change() method.

Syntax: 

$(selector).change(function(e){});

Example 1: The below example will explain how to get the selected input file name without using a path in jQuery.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to get the file input
        by selected filename without
        the path using jQuery?
    </title>
 
    <style>
        h1 {
            color: green;
        }
 
        body {
            text-align: center;
        }
 
        h4 {
            color: purple;
        }
    </style>
    <script src=
    </script>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
 
    <h3>
        How to get the file input by
        selected<br>file name without
        the path using jQuery?
    </h3>
 
    <input type="file" id="geeks">
    <h4><!-- Selected file will get here --></h4>
 
    <script>
        $(document).ready(function () {
            $('input[type="file"]').change(function (e) {
                const geekss = e.target.files[0].name;
                $("h4").text(geekss + ' is the selected file.');
            });
        });
    </script>
</body>
 
</html>


Output: 

Example 2: The below example will show an alert with the selected filename that is accessed without using a path. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to get the file input by selected file
        name without the path using jQuery?
    </title>
 
    <style>
        h1 {
            color: green;
        }
         
        body {
            text-align: center;
        }
         
        h4 {
            color: purple;
        }
    </style>
    <script src=
    </script>
</head>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
 
    <h3>
        How to get the file input by selected<br>
        file name without the path using jQuery?
    </h3>
 
    <input type="file" id="geeks">
    <h4><!-- Selected file will get here --></h4>
     
    <script>
        $(document).ready(function(){
            $('input[type="file"]').change(function(e){
                var geekss = e.target.files[0].name;
                alert(geekss + ' is the selected file .');
            });
        });
    </script>
</body>
 
</html>   


Output: 

 

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

 



Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads