script for multiple file upload/attachment in web form

[Avin Patel]

Hi,
I am looking for script to allow multiple files can be
uploaded/attached in webform ( mostly cgi/perl or php).

But I don't like the multiple input boxes using "<input type="file"
size="40" maxlength="40" name="filename[]">" html tag. As it will
limit the no. of files can be uploaded(only as many of this boxes I
write in form & doesn't look good in form also).

I am looking for multiple file upload in web form using "select" or
"textarea" html tags. So I can upload/attach multiple files without
limit, every attached file will be kept in "textarea/list", than
processed on submit button call.

Can any one suggest where this script can be found, I googled..., but
no luck over there.

Thanks,
Avin Patel

[Grant Wagner]

Avin Patel wrote:

I am looking for multiple file upload in web form using "select" or
"textarea" html tags. So I can upload/attach multiple files without
limit, every attached file will be kept in "textarea/list", than
processed on submit button call.

This isn't going to work. <input type="file" ...> is "special". When the
browser posts the form, it knows to take the contents of the file pointed
to by that form control and send it to the server. The browser has no way
of knowing what to do with a list of files in a <select> or <textarea>.

What you _can_ do, in modern browsers at least, is to let the user "add"
as many <input type="file" ...> inputs as they require:

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

var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.name = 'filename[]';

b.parentNode.insertBefore(fileInput, b);

b.parentNode.insertBefore(document.createElement(' br'), b);
}
}
</script>
<form name="myForm" method="post" enctype="multipart/form-data">
<input type="file" name="filename[]">
<br>
<input type="button" value="Add another file" onclick="addFile(this);">
</form>

It adds the inputs in IE 6SP1, Firefox 0.10.1 and Opera 7.54. I don't
know if it properly submits the filename controls (because they are all
named the same, and have [] in them). If it doesn't work as is, it would
probably work if you gave each input a unique name:

fileInput.name = 'filename' + (one plus the last filename added);

Obviously that's psuedo-code, obtaining the next filename input name
could involve a global variable, or possibly querying the form to obtain
the value of the last filename input.

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