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.
<!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.
<!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.