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. 


How To Get Selected File Name From Input Type File Using jQuery ?


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:


<!DOCTYPE html>
<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

Previous Post Next Post