0

I have a simple HTML form that I am building. I want to be able to added multiple files to submit with the form to upload. Everything I am reading online about HTML5 says that I am able to do this with the HTML5 Input Multiple tag. When I try this in any browser I get the standard Input with a type of file. When I inspect the DOM i see that it has only a single file in it's Files[0] attribute. Here is my form. Please let me know what I am doing wrong.

Here is my HTML for the the form for uploading files: 

<form method="post" action=upload.php" enctype="multipart/form-data">
       <input type="file" id="basicUploadFile" multiple >
</form>

Also. I have tried this in Chrome, Firefox, IE 11. Even going to the W3school.com demo doesn't seem to work in any of them for multiple files.

user2997301
  • 3
  • 3

3 Answers3

0

Is that a typo? There is a " missing before the upload.php

your form tag looks correct

http://en.wikipedia.org/wiki/File_select#Multiple_file_selection

[edit] If you are referring to the W3schools site, this works for me on Chrome and IE http://www.w3schools.com/tags/att_input_multiple.asp

TryIt site:

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_multiple

Musa
  • 96,336
  • 17
  • 118
  • 137
John Lee
  • 1,357
  • 1
  • 13
  • 26
0

<form method="post" action="upload.php" enctype="multipart/form-data">
 <input type="file" id="UploadedFiles" name="UploadedFiles[]" multiple>
 <input type="submit" value="SendFile">
</form>

in upload.php analize structure of array $_FILES ;)

good like!

virtual_cia
  • 31
  • 1
0

files[0] will show you the first file selected. files gives you a collection of the selected files, files.length gives you the number of files selected. So once you select more than one file if you console.log(fileinput.files) you'll see multiple files logged.

Musa
  • 96,336
  • 17
  • 118
  • 137
  • Thank you. I was a bit confused as to the structure of the Files object in the DOM. This helped a ton! – user2997301 Feb 06 '14 at 13:35
  • When I try to select the element using a jquery selector it doesn't seem to find .files Example; $("#basicUploadFile).files returns undefined. – user2997301 Feb 06 '14 at 15:04
  • @user2997301 `$("#basicUploadFile")` is a jQuery Object the files property is on the dom element. To expose the dom element from the jQuery object you can do `$("#basicUploadFile").get(0)` or `$("#basicUploadFile")[0]`. So get files do `$("#basicUploadFile")[0].files` or `$("#basicUploadFile").get(0).files` or even `$("#basicUploadFile").prop('files')`. – Musa Feb 06 '14 at 16:46
  • Still only showing a single item in that array. When I check the $_FILES on the PHP end I get the following array; 'basicUploadFile' => array (size=5) 'name' => array (size=1) 0 => string 'splash-620x300.png' (length=18) 'type' => array (size=1) 0 => string 'image/png' (length=9) 'tmp_name' => array (size=1) 0 => string 'C:\wamp\tmp\php77CD.tmp' (length=23) 'error' => array (size=1) 0 => int 0 'size' => array (size=1) 0 => int 12428 – user2997301 Feb 06 '14 at 20:47
  • That's a php issue, if you want fields to be treated as arrays in php the field name has to end in `[]`. – Musa Feb 06 '14 at 21:33
  • As in the name property of the input needs to be "basicUploadFile[]" or do I need to do soemthing with the $_FILES array that I am using? Also, thank you for all the help. – user2997301 Feb 07 '14 at 13:21
  • `the name property of the input needs to be "basicUploadFile[]"` yes. – Musa Feb 07 '14 at 15:26