1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Styled input file button no longer shows chosen file

Discussion in 'PHP' started by chrisj, Jul 22, 2014.

  1. #1
    I'm using an Upload Script, and I've been working on trying to style the 'Choose File Button' (input file button)
    which was a challenge to be styled for multiple browsers, but finally works with Google, IE and FF.

    However, now that I've successfully styled the input file button, when a file is now chosen, the chosen file name no longer appears, prior to Submit.

    I've attached an image of the code changes I made, plus some CSS styling, and this addition:

    label input[type="file"] {
        position: fixed;
        top: -1000px;
    Code (markup):
    Any suggestions/ideas/remedy on how to get the chosen file to show (or something to show an action has taken place - like a message tha says "File Selected" possibly) will be appreciated
     

    Attached Files:

    chrisj, Jul 22, 2014 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    You're doing it wrong... sorta.
    Here's an example on how you can do it - it will also work just fine if js isn't available. http://jsfiddle.net/xMD3S/3/
     
    PoPSiCLe, Jul 22, 2014 IP
  3. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    Thanks for your reply.
    I don't know how to integrate it into the code I currently have,
    but I gave it a try and this is what it looks like - see attached image
    Any additional help will be appreciated
     

    Attached Files:

    chrisj, Jul 22, 2014 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Well, the javascript in the jsfiddle is based on jQuery - if you're not running jQuery on your site, it won't work.
    Apart from that, the CSS is of course possible to modify, and the JS and CSS is based on the IDs and classes on the inputs themselves, and shouldn't interfere with anything else.
    Since the actual file input isn't hidden, I'm betting that you don't run jQuery, or have placed the javascript code outside the document.ready()-function.
     
    PoPSiCLe, Jul 23, 2014 IP
  5. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #5
    Thanks for all of the replies.
    At this point then, maybe someone can simply help me do one of the following:
    - Get the value of the file selected and just add that to a div next to the styled input file button.
    - Capture the file name from the DOM once the file is selected and then write it to a another HTML element located at the same spot
    - Have a simple a message appear, once a file is selected that says "File Selected"
    just so the uploader knows that an action has taken place, prior to submit.
    Any help with one of these, or another suggestion, will be welcomed.
    Much thanks again
     
    chrisj, Jul 23, 2014 IP