Question

103

Get input type=file value when it has multiple files selected

rated 0 times [ 105] [ 2] / answers: 1 / hits: 143489 / 13 Years ago, thu, august 11, 2011, 12:00:00

Possible Duplicate:

Retrieving file names out of a multi-file upload control with javascript

From HTML5 input type=file allows users to choose multiple files by adding the multiple=multiple :

<input type=file multiple=multiple />

My question is: how can I get the value of that input? When using the .value it only returns the filename of the first file selected, but when choosing more than one I am not able to view the other ones.

What I have:

<input type=file multiple=multiple onchange=alert(this.value)

     onmouseout=alert(this.value) />

which as I told you, is only showing the name of one of the selected files.

NOTE: I don't want to edit the value (I know that is not possible) only the name of the files

Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deonkalvinw

Add To Favorites

Follow

Total Points: 409

Total Questions: 96

Total Answers: 89

Location: Saint Pierre and Miquelon

Member since Sun, Nov 27, 2022

2 Years ago

deonkalvinw questions

1 Handling UI State in Remix.run

Sun, Feb 6, 22, 00:00, 2 Years ago

1 Npm install throws warn old lockfile error

Tue, Dec 28, 21, 00:00, 2 Years ago

1 moving between section page using next and previous button in javascript

Tue, Dec 28, 21, 00:00, 2 Years ago

1 React Horizontal Scrolling cards with Arrows on top

Sun, Aug 22, 21, 00:00, 3 Years ago

1 How to pass state between routes in NEXT JS?

Sun, Mar 7, 21, 00:00, 3 Years ago

View All

answered 13 Years ago trinity · Accepted Answer

The files selected are stored in an array: [input].files

For example, you can access the items

// assuming there is a file input with the ID `my-input`...

var files = document.getElementById(my-input).files;



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

{

 alert(files[i].name);

}

For jQuery-comfortable people, it's similarly easy

// assuming there is a file input with the ID `my-input`...

var files = $(#my-input)[0].files;



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

{

 alert(files[i].name);

}