How to select multiple files with input type file

Question

How to select multiple files with  lt input type  file  gt

User · Accepted Answer

New answer   In HTML5 you can add the multiple attribute to select more than 1 file    lt input type  file  name  filefield  multiple  multiple  gt      Old answer      You can only select 1 file per  lt input type  file    gt   If you want to   send multiple files you will have to use multiple input tags or use   Flash or Silverlight

User · Answer

HTML5 has provided new attribute multiple for input element whose type attribute is file  So you can select multiple files and IE9 and previous versions does not support this   NOTE  be carefull with the name of the input element  when you want to upload multiple file you should use array and not string as the value of the  name attribute   ex  input type  file  name  myPhotos    multiple  multiple   and if you are using php then you will get the data in   FILES and  use var dump   FILES  and see output and do processing Now you can iterate over and do the rest

User · Answer

This jQuery plugin  jQuery File Upload Demo  does it without flash  in the form it s using    lt input type  file  name  files    multiple   gt

User · Answer

The whole thing should look like    lt form enctype  multipart form-data  method  POST  action  submitFormTo php  gt        lt input type  file  name  files    multiple   gt       lt button type  submit  gt Submit lt  button gt   lt  form gt    Make sure you have the enctype  multipart form-data  attribute in your  lt form gt  tag  or you can t read the files on the server side after submission

User · Answer

You can do it now with HTML5  In essence you use the multiple attribute on the file input    lt input type  file  multiple gt

User · Answer

HTML5 has provided new attribute multiple for input element whose type attribute is file  So you can select multiple files and IE9 and previous versions does not support this  NOTE  be carefull with the name of the input element  when you want to upload multiple file you should use array and not string as the value of the name attribute  ex  input type  quot file quot  name  quot myPhotos   quot  multiple  quot multiple quot   and if you are using php then you will get the data in   FILES and use var dump   FILES  and see output and do processing Now you can iterate over and do the rest

User · Answer

Thats easy       lt input type  file  multiple gt      file   on  change  function          readFileDataUrl this function err files              if err  return             console log files   contains base64 encoded string array holding the             image data               var  readFileDataUrl function input callback       var len input files length  files    res         var readFile function filePos           if  filePos               callback false res            else              var reader new FileReader                reader onload function e                                 res push e target result                   readFile  files shift                                reader readAsDataURL filePos                        for var x 0 x lt len x              files push input files x              readFile  files shift

User · Answer

lt form action    method  post  enctype  multipart form-data  gt   lt input type  file  multiple name  img     gt   lt input type  submit  gt   lt  form gt   lt  php print r   FILES  img    name       gt

User · Answer

Copy and paste this into your html    lt input type  file  id  files  name  files    multiple   gt   lt output id  list  gt  lt  output gt    lt script gt  function handleFileSelect evt    var files   evt target files     FileList object     files is a FileList of File objects  List some properties  var output       for  var i   0  f  f   files i   i        output push   lt li gt  lt strong gt    escape f name     lt  strong gt      f type     n a      -                  f size    bytes  last modified                   f lastModifiedDate   f lastModifiedDate toLocaleDateString      n a                   lt  li gt       document getElementById  list   innerHTML     lt ul gt     output join         lt  ul gt        This comes to you  through me  from this webpage  http   www html5rocks com en tutorials file dndfiles

User · Answer

There is also HTML5  lt input type  quot file   quot  multiple   gt   specification   Browser support is quite good on desktop  just not supported by IE 9 and prior   less good on mobile  I guess because it s harder to implement correctly depending on the platform and version

[javascript] How to select multiple files with <input type="file">?

Examples related to javascript

Examples related to html

Examples related to file-upload