How to customize the File Input Field of HTML Form

Discussion in 'HTML & Website Design' started by techbongo, Sep 8, 2009.

0
  1. #1
    Hi,

    I want to know how to customize the file field in a HTMl Form? I want some customization to this input field, like-
    1. To change the default text 'Browse...'
    2. To change the background color of the file field.
    3. To add some javascript, so that the Browse button disappears, and while the text-box is clicked, the Common Dialog Box Opens.


    Moreover, I want to know, what will be the event to call a function, if I want to submit the form, immediately after selecting a file. (Just like what we see in Google, Orkut, Facebook image upload pages).

    There is a Quote form at the right side of this web page. I want to customize the file input filed in that form. Please help me. http://techbongo.com/cheap-website/web-development/
     
    techbongo, Sep 8, 2009 IP
  2. olaf2

    olaf2 Active Member

    Messages:
    1,362
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    80
    #2
    actually the file field is "styled" by your browser, maybe you check some ajax upload functions
     
    olaf2, Sep 8, 2009 IP
  3. techbongo

    techbongo Active Member

    Messages:
    309
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    80
    #3
    If I'm not wrong, you must write some custom CSS codes to change the default look of an Input field. And this is true for any standard browser.

    I don't need custom AJAX function. I just want to change the default look and behaviour of File Input box. No browse button (where it contains only a text field, which popups the common dialog box on click), if it's there, then with custom text (not written 'Browse...'). And also a suitable event where I can call a javascript function to auto submit the form instantly, when a file is selected.

    <input type="file" name="myFile" id="myFile" on...Event="autoSubmit()" />
    I need to know this event.
     
    techbongo, Sep 8, 2009 IP
  4. happpy

    happpy Well-Known Member

    Messages:
    926
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    120
    #4
    teh FILE-upload form field is not stylable via CSS for security reason.
    its meant to stay style-free to always have people fully know that they perform a file upload.


    you can go this way around that problem:
    overlay a button-graphic with css-positioning
     
    happpy, Sep 8, 2009 IP
  5. techbongo

    techbongo Active Member

    Messages:
    309
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    80
    #5
    Are you using Orkut , Youtube, Facebook like services? If yes, then you must have uploaded images or viodes too. Please check those pages. It'll be clear that customizing file input filed is indeed possible. Moreover, the browser never asks you to block those upload pages because they are containing scripts, which may harm your system (the alert, that is shown usually).

    And who says CSS customization is not possible on file input field? Check my webpage http://techbongo.com/cheap-website/web-design/ The file input field in the quotation form (at right) is customized. It's color is just changed and fonts too. But I'm willing to change the text 'Browse...', and the way a file upload field works.
     
    techbongo, Sep 8, 2009 IP