In this post, we will learn how to get selected file name from input type file using jQuery. So how we can do this, we will learn in this post.
Get File Name Form Input Type File
To get selected file name from HTML input type file form, we use jQuery change() method. So how can we get the file name, for that we will understand the below example:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Get Selected File Name From Input Type File Using jQuery ?</title>
</head>
<body>
<form>
<input type="file">
<p><strong>Note:</strong> Choose any file on your computer and its name will be displayed.</p>
</form>
<div id="fileName">File name show here...</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('input[type="file"]').change(function(e){
var fileName = e.target.files[0].name;
$('#fileName').text('File Name is - ' + fileName);
});
});
</script>
</body>
</html> code-box
Summary
In this post we learned how to get selected file name from input type file using jQuery. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.
Post a Comment