How to Get File Name from Upload Form Using jQuery?

Question

I want to get the file name of the uploaded file using jQuery. But the problem, I got the fake path and file name, instead of the file name only. This is my form.

<form action="" method="post">
   <input type="file" name="uploadFile" id="uploadFile" /> 
   <input type="submit" name="submit" value="Upload" id="inputSubmit" />
</form>

And the jQuery is like this

$(document).ready(function(){
    $('#inputSubmit').click(function(){
      alert($('#uploadFile').val());
    });
});

I use Chrome and got this in the alert box. Let's say I choose file named filename.jpg.

C:\fakepath\filename.jpg

How can I get only the file name? Thank you for your help.

Community · Accepted Answer · 2017-05-23 11:54:29Z

7

Split the filepath string with "\" and use the last item in the resulting array.

see: Getting the last element of a split string array

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Sep 21, 2011 at 14:12

Nathan Hase

6594 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Mackintosh · Accepted Answer · 2013-04-09 19:24:37Z

4

You can also do:

$('#uploadFile').prop("files")['name'];

If it's a multiple file input, do:

$.each($('#uploadFile').prop("files"), function(k,v){
    var filename = v['name'];

    // filename = "blahblah.jpg", without path
});

answered Apr 9, 2013 at 19:24

Mike Mackintosh

14.3k7 gold badges64 silver badges87 bronze badges

1 Comment

Haktan Suren Over a year ago

I think this is the proper way of using for single file $('#uploadFile').prop("files")[0]['name'];

Flexo - Save the data dump · Accepted Answer · 2018-12-06 16:01:36Z

2

get file name when uploading using jquery

var filename = $('input[type=file]').val().split('\').pop();

edited Dec 6, 2018 at 16:01

Flexo - Save the data dump♦

89.1k22 gold badges205 silver badges286 bronze badges

answered Jun 22, 2017 at 6:27

ujjal

2354 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to Get File Name from Upload Form Using jQuery?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related