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

18 Aug, 2021
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 by using the jQuery change() method. This method is used in the JQuery to get the file input by selected file name. And the HTML <input type=”file”> is used to specify the file select field and add a button to choose a file for upload to the form.Syntax:  
jQuery change() method:  
$(selector).change(function)
HTML <input type=”file”>:  
<input type="file"> 
Below examples illustrates the approach:Example 1: In this example we will display the file name with the extension by using the change() method and the file will be selected by the HTML <input type=”file”>.  
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="https://code.jquery.com/jquery-1.12.4.min.js">    </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;                $("h4").text(geekss + ' is the selected file.');             });        });    </script></body> </html>   
Output:  
Example 2: In this example we will display the filename with the extension through an alert, by using the change() method and the file will be selected by the HTML <input type=”file”>.  
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="https://code.jquery.com/jquery-1.12.4.min.js">    </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.
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
kapoorsagar226
CSS-Misc
HTML-Misc
jQuery-Misc
Picked
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to set space between the flexbox ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?