Jquery input.files equivalent

Question

I have a simple html form with a single file upload input. (jsfiddle)

In the past, I have accessed the file selected by the user using input.files, however I am at a loss as to how to do this with JQuery;

Code:

$(function () {
    $("#cmdSubmit").bind("click", function () {
        var file = document.getElementById("fileInput").files[0];
        alert(file); //A

        file = $("#fileInput").val();
        alert(file); //B

        file = $("#fileInput").files[0];
        alert(file); //C

    });        
});

Option A give me what I expect, a file object. However, option B simply gives me the name of the uploaded file, and (as far as I can tell) not the file itself.

Option C shows that files is undefined.

What is the Jquery equivalent of input.files?

Note: I have no objection to using native javascript; but given that I am using JQuery throughout the rest of this project I'd prefer to use it here as well if possible.

Stefan · Accepted Answer · 2021-06-05 22:50:38Z

62

You have to access the element. Try:

file = $("#fileInput")[0].files[0];
alert(file); //C

or (thank you Jack)

file = $("#fileInput").prop('files')[0];
alert(file);

Fiddle

edited Jun 5, 2021 at 22:50

answered Dec 6, 2012 at 16:20

Stefan

15k17 gold badges92 silver badges155 bronze badges

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

1 Comment

Ja͢ck Over a year ago

.prop('files')[0] is more likely to work than .attr('file')

Sridhar Narasimhan · Accepted Answer · 2012-12-06 16:23:32Z

4

Try the below code

var file = $("#fileInput").get(0).files[0];
 alert(file);

Thanks

answered Dec 6, 2012 at 16:23

Sridhar Narasimhan

2,6532 gold badges19 silver badges25 bronze badges

1 Comment

Andz Over a year ago

This looks correct as per: learn.jquery.com/using-jquery-core/faq/… The FAQ just mentions that this is slower... Why the downvote?

Quentin · Accepted Answer · 2012-12-06 16:21:45Z

3

jQuery doesn't provide a wrapper for the Files API. So there isn't a jQuery style way to do this, at least not built into the jQuery core.

Your options:

stick with option A
wait for jQuery to include such a wrapper (they might not)
find an extension written by someone else (if one exists)
write an extension yourself

answered Dec 6, 2012 at 16:21

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

arhea · Accepted Answer · 2012-12-06 16:21:06Z

0

$(function () {
    $("#cmdSubmit").bind("click", function () {
       alert(this.files);
     });        
});

answered Dec 6, 2012 at 16:21

arhea

4542 silver badges5 bronze badges

Collectives™ on Stack Overflow

Jquery input.files equivalent

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related