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

Last Updated : 27 Sep, 2024

To get the selected file name without the path using jQuery, use the HTML <input type="file"> element. Upon file selection, the jQuery change() method captures the event, and the file name is retrieved using the name property of the event target's files.

Syntax:

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

Example 1: In this example we demonstrate how to use jQuery to get the selected file's name from an input field and display it without the full path, updating a heading with the file name.

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="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) {
                const geekss = e.target.files[0].name;
                $("h4").text(geekss + ' is the selected file.');
            });
        });
    </script>
</body>

</html>

Output:

Example 2: In this example we demonstrates how to use jQuery to retrieve and display the selected file's name from a file input field, then show an alert with the file name without the full path.