Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
40 views

Accessing Input File Upload Field in JavaScript - Stack Overflow

$("#imageupload")[0] is used because: 1) The jQuery ID selector $("#imageupload") returns an array, even if only one element matches the ID. 2) [0] accesses the first element in this array. 3) The files property is then accessed on this first element. files[0] and files[i] access specific elements in the FileList object returned by the files property of the file input element. This allows looping through and accessing the name of each selected file.

Uploaded by

Erudite Q-fix
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
40 views

Accessing Input File Upload Field in JavaScript - Stack Overflow

$("#imageupload")[0] is used because: 1) The jQuery ID selector $("#imageupload") returns an array, even if only one element matches the ID. 2) [0] accesses the first element in this array. 3) The files property is then accessed on this first element. files[0] and files[i] access specific elements in the FileList object returned by the files property of the file input element. This allows looping through and accessing the name of each selected file.

Uploaded by

Erudite Q-fix
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Accessing input file upload field in JavaScript

Asked
4 years, 5 months ago Modified
4 years, 5 months ago Viewed
6k times

I have an input file upload field for single image file:

2 <input type="file" id="imageupload" />

To access the name of selected image file, we use

var fname = $("#imageupload")[0].files[0].name;

I don't know why [0] is used after $("#imageupload")

Similarly for multiple files upload field

<input type="file" id="imageupload" multiple />

We use (in loop)

var file_name = $("#imageupload")[0].files[i].name;

Can anyone clear my concept regarding following:

$("#imageupload")[0]

files[0]

files[i]

javascript

Your privacy
Share Improve this question Follow asked Oct 4, 2018 at 4:25
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose
information in accordance with our Cookie Policy. Sachin
1,616 1 22 57

Accept all cookies

$("#imageupload") is asking jquery to select all elements that have the id of imageupload . It is
possible zero or more elements will be Necessary cookies
found with that id.only
Thus jquery returns an array. [0] means the
first element in the found array. Then you ask for the first file files[0] in that input element. If a loop,
meaning multiple files, you use a variable and ask for file at the variable location files[i] where i is
Customize settings
the variable. Whenever you see square brackets in JavaScript, and most other languages but not all, it
means you are accessing an element from an array.
– CodingYoshi
Oct 4, 2018 at 4:40

Report this ad

Sorted by:
1 Answer
Highest score (default)

$("#imageupload")[0]

1
Basically, we don't need to use the brackets because when using the ID Selector, in the ideal
world, it's supposed to be only one element match the given ID. We used it here just to make sure
there's no chance for error occur. You could remove that [0] in case there's exactly one element
in your website has that ID. Like this:

var fname = $("#imageupload").prop('files')[0].name;

// or
var fname = document.getElementById('fileItem').files[0].name //without jQuery

This is the demo: https://codesandbox.io/s/kx5q2x24xv

files[0] and files[i]

Your The files here is called a FileList object, and:


privacy
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose
informationAnin object
accordance with
of this ouris
type Cookie Policy
returned by. the files property of the HTML
element; this lets you
access the list of files selected with
the <input type="file"> element.
Accept all cookies

In other words:
Necessary cookies only

All element nodes have a files array on them


Customize which allows
access to the items in this list.
settings
We use the bracket with the index in order to access the specific element of that array.

This example iterates over all the files selected by the user using an input element:

// fileInput is an HTML input element: <input type="file" id="myfileinput"


multiple>

var fileInput = document.getElementById("myfileinput");

// files is a FileList object (similar to NodeList)

var files = fileInput.files;

var file;

// loop through files

for (var i = 0; i < files.length; i++) {

// get item
file = files.item(i);
//or

file = files[i];

alert(file.name);

For more information: FileList

Share Improve this answer Follow edited Oct 4, 2018 at 7:36 answered Oct 4, 2018 at 4:45
You Nguyen
9,801 4 24 51

@nguyen we must need [0] in $("#imageupload")[0] otherwise I'm getting TypeError:


$(...).files is undefined
–  Sachin
Oct 4, 2018 at 7:22

I'm sorry, I've updated my answer. We have to access the FileList in the jQuery way.
– You Nguyen
Oct 4,
2018 at 7:36

But you have done it with another way $("#imageupload").prop('files')[0].name; . I still couldn't
get my exact answer - why do we use [0] after id selector.
–  Sachin
Oct 5, 2018 at 4:43

if that is the case of an array then as jquery returns files array then why [1] does not work if I have some
another file upload field with same id?
–  Sachin
Oct 5, 2018 at 4:44

Your privacy
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose
information in accordance with our Cookie Policy.

Accept all cookies

Necessary cookies only

Customize settings

You might also like