468,161 Members | 1,952 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,161 developers. It's quick & easy.

script for multiple file upload/attachment in web form

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
Jul 23 '05 #1
1 5164
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

Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Web Master | last post: by
10 posts views Thread by Brian Henry | last post: by
4 posts views Thread by Jonny | last post: by
7 posts views Thread by pbd22 | last post: by
5 posts views Thread by camphor | last post: by
1 post views Thread by gcdp | last post: by
reply views Thread by kamranasdasdas | last post: by
reply views Thread by gcreed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.