Detecting HTML5 browser support for selecting multiple files

2011 Aug 11, Information Technology

HTML5 enables the selection of multiple files with a single input element of type file. This is accomplished by setting the new multiple attribute to true.

The script below creates a single input element with multiple="true" or ten separate input elements depending on whether the browser recognizes multiple as a boolean property of the object underlying a test input element.

This approach does not require use of the hasAttribute method, which is not supported in earlier versions of Internet Explorer.

I tested this script on Chrome 13, which is HTML5-compliant in this regard, and Internet Explorer 8, which is not. The results were favorable for my purposes.

<script type="text/javascript">
   var i = document.createElement("input");
   i.setAttribute("multiple", "true");
   if (i.multiple == true) {
     document.write('<input type="file" multiple="true" name="image[]">');
   }
   else {
     for (var n = 0; n<10; n++) {
       document.write('<input type="file" name="image[]">');
      }
   }
</script>

© 2008-2012 K.G. Steely