Use jQuery to get the file input's selected filename without the path

You just need to do the code below. The first [0] is to access the HTML element and second [0] is to access the first file of the file upload (I included a validation in case that there is no file):

 var filename = $('input[type=file]')[0].files.length ? ('input[type=file]')[0].files[0].name : ""; 

Get path work with all OS

var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, ''); 

Example

C:\fakepath\filename.doc /var/fakepath/filename.doc 

Both return

filename.doc filename.doc 

Chrome returns C:\fakepath\... for security reasons - a website should not be able to obtain information about your computer such as the path to a file on your computer.

To get just the filename portion of a string, you can use split()...

var file = path.split('\\').pop(); 

jsFiddle.

...or a regular expression...

var file = path.match(/\\([^\\]+)$/)[1]; 

jsFiddle.

...or lastIndexOf()...

var file = path.substr(path.lastIndexOf('\\') + 1); 

jsFiddle.

Here is how I do it, it works pretty well.

In your HTML do:

<input type="file" name="Att_AttributeID" onchange="fileSelect(event)" class="inputField" /> 

Then in your js file create a simple function:

function fileSelect(id, e){ console.log(e.target.files[0].name); } 

If you're doing multiple files, you should also be able to get the list by looping over this:

e.target.files[0].name 

maybe some addition for avoid fakepath:

var fileName = $('input[type=file]').val(); var clean=fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path alert('clean file name : '+ fileName); 

This alternative seems the most appropriate.

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

How about something like this?

var pathArray = $('input[type=file]').val().split('\\'); alert(pathArray[pathArray.length - 1]); 

Get the first file from the control and then get the name of the file, it will ignore the file path on Chrome, and also will make correction of path for IE browsers. On saving the file, you have to use System.io.Path.GetFileName method to get the file name only for IE browsers

var fileUpload = $("#ContentPlaceHolder1_FileUpload_mediaFile").get(0); var files = fileUpload.files; var mediafilename = ""; for (var i = 0; i < files.length; i++) { mediafilename = files[i].name; } 

Does it have to be jquery? Or can you just use JavaScript's native yourpath.split("\\") to split the string to an array?

<script type="text/javascript"> $('#upload').on('change',function(){ // output raw value of file input $('#filename').html($(this).val().replace(/.*(\/|\\)/, '')); // or, manipulate it further with regex etc. var filename = $(this).val().replace(/.*(\/|\\)/, ''); // .. do your magic $('#filename').html(filename); }); </script> 

Here you can call like this Let this is my Input File control

 <input type="file" title="search image" id="file" name="file" onchange="show(this)" /> 

Now here is my Jquery which get called once you select the file

<script type="text/javascript"> function show(input) { var fileName = input.files[0].name; alert('The file "' + fileName + '" has been selected.'); } </script> 

var filename=location.href.substr(location.href.lastIndexOf("/")+1); alert(filename); 

We can also remove it using match

var fileName = $('input:file').val().match(/[^\\/]*$/)[0]; $('#file-name').val(fileName);