input file-multi file, directory

For the <input type="file">, can I select directory? Multiple directories?


quickcur (135)
7/29/2004 10:17:46 PM
comp.lang.javascript 38370 articles. 2 followers. javascript4 (1315) is leader. Post Follow

2 Replies

Similar Articles

[PageSpeed] 53

"Quick Function" wrote
> For the <input type="file">, can I select directory?

I 'm afraid not. You cannot even be sure of the existence of a particular
directory on other systems.

> Multiple directories?

All at once??

7/30/2004 1:15:49 AM
Quick Function wrote:

> For the <input type="file">, can I select directory? Multiple directories?
> Thanks,
> qq

As mentioned, you can not select multiple files or directories using <input
type="file">. As a result, another solution is necessary. The following will
only work in the most modern of browsers (IE6SP1, Gecko-based browsers, Opera
7.53, perhaps others you will need to test):

<script type="text/javascript">
function anotherFile(lnk) {
 if (document.createElement &&
     lnk.insertBefore &&
     lnk.parentNode) {

  var finp = document.createElement('input');
  var brk = document.createElement('br');
  if (finp && brk) {
   finp.type = 'file';
   finp.name = 'file' + (new Date()).getTime() + Math.floor(100 *
   lnk.parentNode.insertBefore(finp, lnk);
   lnk.parentNode.insertBefore(brk, lnk);
 return false;
<form name="myFormName" id="myFormId">
<input type="file" name="file1">
<a href="#" onclick="return anotherFile(this);">Another File</a>


- "(new Date()).getTime() + Math.floor(100 * Math.random())" is intended to
generate a unique form element name. This should not present much of a problem
on the server, most server-side technology has something like
Request.subkeys("file") that allows you to find all inputs that start with a
particular string. The other ways to do this is have a global variable that
gets incremented to produce "file2", "file3", etc.

- The code as written depends on the "Another File" link coming after the
<input>. This allows the use of insertBefore() to add another file input. The
other possibilities would be to have a dummy <span> under the last input as a
marker to insertBefore(), or simply appendChild() on the <form>.

- As already mentioned this only works in the most modern browsers.

- I haven't actually tested this to upload files. Some browsers may have a
problem actually submitting form inputs added to the form using

Grant Wagner <gwagner@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

7/30/2004 3:28:24 PM