Results 1 to 4 of 4

Thread: Help with extracting filename from forms file upload field

  1. #1
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help with extracting filename from forms file upload field

    I'm trying to extract just the filename from a forms file upload field but just can't get it the way I want it.
    Here's the code I'm using...
    Code:
    function extract(what)
    {
    if (what.indexOf('/') > -1)
    answer = what.substring(what.lastIndexOf('/')+1,what.length);
    else
    answer = what.substring(what.lastIndexOf('\\')+1,what.length);
    document.write(answer);
    }
    Code:
    <form name="myform">
    <input id="inpFile1" name="inpFile1" size="60" type="file">
    <input style="height:23; color:#FF0000; font-weight:bold" type="button" value="Show Filename" onclick="extract(myform.inpFile1.value)">
    </form>
    Problem is that is writes the filename to a new white blank page in the top left corner.
    How do I get it to write the filename to a spot on the current page?
    Preferably right next to the Show Filename button.

    alert(answer);
    gives me a popup box with the filename but I don't want that.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The document.write() method, when executed after a page has loaded, overwrites the page. You need an element, possibly a span, with an id (you could use a text input with a name and access it through the form's element collection, if you want). Let's do it with a span:

    Code:
    function extract(what)
    {
    if (what.indexOf('/') > -1)
    answer = what.substring(what.lastIndexOf('/')+1,what.length);
    else
    answer = what.substring(what.lastIndexOf('\\')+1,what.length);
    document.getElementById('fname').innerHTML=answer;
    }
    and add the span in after the file button (keep your other HTML code too):

    HTML Code:
    <input id="inpFile1" name="inpFile1" size="60" type="file"> <span id="fname"></span>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    That works!! Thanks

    Could you also give me an example of how to put that filename
    in a text box somewhere else on the page?

    I really appreciate your help

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, when you put it that way "a text box somewhere else on the page", I cannot be sure said text box will be part of the same form or part of any form. So, this is a good way to do that, under the circumstances:
    Code:
    function extract(what)
    {
    if (what.indexOf('/') > -1)
    answer = what.substring(what.lastIndexOf('/')+1,what.length);
    else
    answer = what.substring(what.lastIndexOf('\\')+1,what.length);
    document.getElementById('fname_txtbx').value=answer;
    }
    HTML Code:
    <input type="text" id="fname_txtbx">
    Notes: This will work even if the text box is a part of a form. If it is a part of a form, say the 1st element in a form named 'form12', you can access its value like so:

    Code:
    document.forms['form12'][0].value
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •