script for multiple file upload/attachment in web form

Discussion in 'Javascript' started by Avin Patel, Nov 4, 2004.

  1. Avin Patel

    Avin Patel Guest

    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
     
    Avin Patel, Nov 4, 2004
    #1
    1. Advertising

  2. Avin Patel

    Grant Wagner Guest

    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 <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Grant Wagner, Nov 4, 2004
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?U2FyYXY=?=

    Upload a file without file Upload control - ASP.Net

    =?Utf-8?B?U2FyYXY=?=, Aug 2, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    2,548
    Bruce Barker
    Aug 3, 2005
  2. Replies:
    1
    Views:
    959
    Gabriel Genellina
    Nov 25, 2006
  3. Fredde

    Upload Image TO sever with wse Attachment

    Fredde, Feb 4, 2005, in forum: ASP .Net Web Services
    Replies:
    1
    Views:
    106
    Fredde
    Feb 4, 2005
  4. Replies:
    1
    Views:
    284
    Ray Costanzo [MVP]
    Nov 28, 2004
  5. Avin Patel
    Replies:
    4
    Views:
    1,062
    Brian McCauley
    Nov 5, 2004
Loading...

Share This Page