How to get selected file name from Input Type File using jQuery

admin January 3, 2021October 10, 2021 0 Comments display file name in page after selecting file in file input, get file name from input typefile jquery, how to get file path from input typefile using jquery, how to get input typefile value in javascript, jquery get file from input typefile, while using input typefile how to get absolute path of the file

In this tutorial, we are going to see how to get selected file name from Input Type File using jQuery. You can simply use jQuery’s change() method to get the filename selected by the HTML form input .

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>How to get selected file name from Input Type File</title>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			// Put the jQuery code Here 
		</script>
	</head>
	<body>
	   <input type="file">
	</body>
</html>

jQuery Code:

$(document).ready(function() {
    $('input[type="file"]').change(function(e) {
        var file = e.target.files[0].name;
        alert('The file "' + file + '" has been selected.');
    });
});

Result

HTML Code:

jQuery Code:

You May Also Like

Auto-update DIV content while typing in textarea with jQuery

How to show/hide DIV on selection of ANY drop-down value?

Scroll to the top of the page using jQuery

Leave a Reply Cancel reply