Get filename from input [type='file'] using jQuery

Question

This is the uploaded form.

<form class="alert alert-info">
    <div>
        <b id = "select_file" class="span3" style="font-weight: bold; cursor: pointer; ">Please select image</b>
        <input class="span3" type="file" name="image_file" id="image_file" style="display:none " />
        <input disabled="true" type="button" value="Upload image" class="btn" />
    </div>
</form>

I use the following script to open a window with files. I want to show a file name in <b id = 'select_file'>.

How can I do this?

$('#select_file').click(function(){
    var _this = $(this);
    $('#image_file').show().focus().click().hide();

    var filename = $('#image_file').val();
    _this.html(filename);

    $('.btn').attr('disabled', false);
});

score 97 · Answer 1 · edited Sep 05 '16 at 18:25

97

Getting the file name is fairly easy. As matsko points out, you cannot get the full file path on the user's computer for security reasons.

var file = $('#image_file')[0].files[0]
if (file){
  console.log(file.name);
}

edited Sep 05 '16 at 18:25

Peter Mortensen

30,738
21
105
131

answered Dec 08 '12 at 18:16

Greg W

5,219
1
27
33

the brawser is Chrome. After second click on Please select the file ... The name of is showing in console. – dido Dec 08 '12 at 18:24
5

or `var filename = $('#image_file')[0].files[0]['name']` – squarecandy Dec 03 '14 at 00:56
1

nevermind… I see now what you're doing, checking if the file object exists first. – squarecandy Dec 03 '14 at 00:58

score 53 · Accepted Answer · edited Sep 05 '16 at 18:23

53

You have to do this on the change event of the input type file this way:

$('#select_file').click(function() {
    $('#image_file').show();
    $('.btn').prop('disabled', false);
    $('#image_file').change(function() {
        var filename = $('#image_file').val();
        $('#select_file').html(filename);
    });
});

edited Sep 05 '16 at 18:23

Peter Mortensen

30,738
21
105
131

answered Dec 08 '12 at 18:22

Jai

74,255
12
74
103

12

It's return a string that contain 'fakepath'. What is that? – Hendry Tanaka Oct 10 '14 at 04:33
2

it's nature of browser security, browsers usually hide file path – Mikalai Nov 15 '16 at 18:04
@Mikalai how do you pass this image's data to PHP using AJAX? I am getting the string 'Object file' every time I try to pass the image data. Any tips? – retro_coder Jul 08 '20 at 06:41

score 9 · Answer 3 · edited Sep 05 '16 at 18:08

9

There is no jQuery function for this. You have to access the DOM element and check the files property.

document.getElementById("image_file").files[0];

Or

$('#image_file')[0].files[0]

edited Sep 05 '16 at 18:08

Peter Mortensen

30,738
21
105
131

answered Jan 20 '14 at 13:04

Pascalius

14,024
4
40
38

score 6 · Answer 4 · edited Sep 05 '16 at 18:11

This was a very important issue for me in order for my site to be multilingual. So here is my conclusion tested in Firefox and Chrome.

jQuery trigger comes in handy.

So this hides the standard boring type=file labels. You can place any label you want and format anyway. I customized a script from http://demo.smarttutorials.net/ajax1/. The script allows multiple file uploads with thumbnail preview and uses PHP and MySQL.

<form enctype="multipart/form-data" name='imageform' role="form"    ="imageform" method="post" action="upload_ajax.php">
    <div class="form-group">
        <div id="select_file">Select a file</div>
        <input class='file' type="file" style="display: none " class="form-control" name="images_up" id="images_up" placeholder="Please choose your image">
        <div id="my_file"></div>
        <span class="help-block"></span>
    </div>
    <div id="loader" style="display: none;">
        Please wait image uploading to server....
    </div>
    <input type="submit" value="Upload" name="image_upload" id="image_upload" class="btn"/>
</form>

$('#select_file').click(function() {
    $('#images_up').trigger('click');
    $('#images_up').change(function() {
        var filename = $('#images_up').val();
        if (filename.substring(3,11) == 'fakepath') {
            filename = filename.substring(12);
        } // Remove c:\fake at beginning from localhost chrome
        $('#my_file').html(filename);
   });
});

The sample HTML is not well-formed. E.g. near "`="imageform"`" and ` — Peter Mortensen, Sep 05 '16 at 18:13

score 6 · Answer 5 · answered Apr 01 '18 at 11:59

6

Try this to Get filename from input [type='file'] using jQuery.

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

Taken from @ jQueryPot

answered Apr 01 '18 at 11:59

jonathan klevin

193
1
2

how can I get it in button click – user123456 Nov 01 '20 at 05:21

Nisharg Shah · Answer 6 · 2018-09-10T10:06:57.243

Using Bootstrap

Remove form-control-file Class from input field to avoid unwanted horizontal scroll bar

Try this!!

$('#upload').change(function() {
    var filename = $('#upload').val();
    if (filename.substring(3,11) == 'fakepath') {
        filename = filename.substring(12);
    } // For Remove fakepath
    $("label[for='file_name'] b").html(filename);
    $("label[for='file_default']").text('Selected File: ');
    if (filename == "") {
        $("label[for='file_default']").text('No File Choosen');
    }
});

.custom_file {
  margin: auto;
  opacity: 0;
  position: absolute;
  z-index: -1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
   <label for="upload" class="btn btn-sm btn-primary">Upload Image</label>
    <input type="file" class="text-center form-control-file custom_file" id="upload" name="user_image">
    <label for="file_default">No File Choosen </label>
    <label for="file_name"><b></b></label>
</div>

score 2 · Answer 7 · edited Mar 05 '17 at 13:48

2

$("#filetosend").prop('files')[0]

edited Mar 05 '17 at 13:48

FelixSFD

6,052
10
43
117

answered Mar 05 '17 at 13:47

user7661816

21
1

score 1 · Answer 8 · answered Oct 12 '17 at 07:11

You can access to the properties you want passing an argument to your callback function (like evt), and then accessing the files with it (evt.target.files[0].name) :

$("document").ready(function(){
  $("main").append('<input type="file" name="photo" id="upload-photo"/>');
  $('#upload-photo').on('change',function(evt) {
    alert(evt.target.files[0].name);
  });
});

score 0 · Answer 9 · edited Sep 05 '16 at 18:13

0

var file = $('#YOURID > input[type="file"]'); file.value; // filename will be,

In Chrome, it will be something like C:\fakepath\FILE_NAME or undefined if no file was selected.

It is a limitation or intention that the browser does not reveal the file structure of the local machine.

edited Sep 05 '16 at 18:13

Peter Mortensen

30,738
21
105
131

answered Aug 21 '15 at 21:31

Alan Dong

3,981
38
35

score -1 · Answer 10 · edited Sep 07 '18 at 13:07

-1

If selected more 1 file:

$("input[type="file"]").change(function() {
   var files = $("input[type="file"]").prop("files");
   var names = $.map(files, function(val) { return val.name; });
   $(".some_div").text(names);
});

files will be a FileList object. names is an array of strings (file names).

edited Sep 07 '18 at 13:07

Michel

4,076
4
34
52

answered Sep 07 '18 at 11:04

Konstantin Kolomiets

1
1

how to access the fileList object in PHP? – retro_coder Jul 08 '20 at 06:41

score -2 · Answer 11 · edited Sep 05 '16 at 18:24

-2

This isn't possible due to security reasons. At least not on modern browsers. This is because any code getting access to the path of the file can be considered dangerous and a security risk. Either you'll end up with an undefined value, an empty string or an error will be thrown.

When a file form is submitted, the browser buffers the file temporarily into an upload directory and only the temporary file name of that file and basename of that file is submitted.

edited Sep 05 '16 at 18:24

Peter Mortensen

30,738
21
105
131

answered Dec 08 '12 at 18:15

matsko

21,895
21
102
144

3

The temporary file ame that you may see on the server side is not generated on the client side. That is done on the server side. The path is not accessible but the file name itself is. – Dennis Day Aug 11 '13 at 23:47
@DennisDay the server utilizes the filepath to know what the *file* actually is. The OP is using a form, he's using some sort of server processing that takes the form as a submission. – Thomas Dec 09 '22 at 21:36

Get filename from input [type='file'] using jQuery

11 Answers11

Linked