How to get file input by selected file name without path using jQuery ?
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 > </ 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 > </ 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
Share your thoughts in the comments
Please Login to comment...