Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts

    a piece of code works ok on firefox but not on chrome

    Hi, can anyone help me with this? The following html is to upload an image, it works ok on firefox, but while using google chrome, nothing happened when I clicked "upload LOGO" button.
    .................................................................................................... ....
    <html>
    <body>
    <form method="post" action="action_start_initial_registration.php" name="initial_registration" id="initial_registration" enctype="multipart/form-data">
    <input type="file" style="display:none" onchange="checkLogo()" name="input_logo_file" id="input_logo_file" value="input_logo_file">
    <input type="text" name="logo_flag" id="logo_flag" value="0" style="display:none;"/>
    <a href="javascript:void(0);" onclick="input_logo_file.click()"><em>upload LOGO</em></a><br />
    </form>
    <script type="text/javascript">
    function checkLogo(){
    document.getElementById("logo_flag").value="1";
    document.getElementById("initial_registration").submit();
    }
    </script>
    </body>
    </html>
    .............................................................................................
    Last edited by cdzhang; 03-20-2012 at 12:49 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Confusing code ... I am surprised that the code works in FF

    1. The field named "input_logo_file" should be addressed with either document.getElementById("input_logo_file") or document.formname.input_logo_file but not only with input_logo_file.
    2. checkLogo() accesses an element with id "initial_registration". Where is this element? What type of element is it?
    3. .click()-ing on a field of type "file" will not work in Chrome as it handles those elements differently

  • #3
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by cdzhang View Post
    it works ok on firefox, but while using google chrome, nothing happened when I clicked "upload LOGO" button.
    I don't believe your code uploads anything to anywhere in FF or any other browser. For starters, both your inputs have style="display: none;" and so don't even appear in the browser.

    Also, to upload a file your form must have enctype="multipart/form-data"

    And finally, when I click the link that does appear in the browser I get an error saying initial_registration is null.

    What version of FF are you claiming your code works in?

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi, I changed tried both, but still failed on google chrome! Both ways worked OK on firefox and IE.

  • #5
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by cdzhang View Post
    Hi, I changed tried both, but still failed on google chrome! Both ways worked OK on firefox and IE.
    I don't believe the red bits because of the reasons I posted earlier.

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    I agree with webdev1958, although enctype="multipart/form-data" might not be needed any more if you're planning to work with the new File API or FormData elements for XMLHttpRequest level 2.

    If you don't know what I am talking about, you'd most definitely need enctype="multipart/form-data" :-)

    @webdev1958: In Firefox it's possible to hide an input element of type "file" and activate the action to select files by executing its click() method. But this won't work in Chrome, as I recently discovered.

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    In fact, I only selected a piece of code. The origin form was:
    <form method="post" action="action_start_initial_registration.php" name="initial_registration" id="initial_registration" enctype="multipart/form-data">
    That is what 'initial_registration' locates. And the file will be posted to action_start_initial_registration.php.

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    the form is
    <form method="post" action="action_start_initial_registration.php" name="initial_registration" id="initial_registration" enctype="multipart/form-data">

  • #9
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    @webdev1958: In Firefox it's possible to hide an input element of type "file" and activate the action to select files by executing its click() method. But this won't work in Chrome, as I recently discovered.
    I think this maybe the reason, chrome does not support to select files by executing the click() method of a hidden input whose type is file.

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Then the problem is that .click() on an input element of type "file" will generally not work in Chrome.

  • Users who have thanked devnull69 for this post:

    cdzhang (03-20-2012)

  • #11
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by devnull69 View Post
    @webdev1958: In Firefox it's possible to hide an input element of type "file" and activate the action to select files by executing its click() method. But this won't work in Chrome, as I recently discovered.
    Yes I found that out but still nothing was being uploaded, as I expected it wouldn't. Plus the op is now showing different code for the <form> so it seems to me this is being made up as the op goes along

    Quote Originally Posted by cdzhang View Post
    In fact, I only selected a piece of code. The origin form was:
    <form method="post" action="action_start_initial_registration.php" name="initial_registration" id="initial_registration" enctype="multipart/form-data">
    That is what 'initial_registration' locates. And the file will be posted to action_start_initial_registration.php.

  • #12
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I found that it works after using style="visibility:hidden" instead of style="display:none" in the input field whose type is file both in firefox and chrome.

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Here's an alternative solution to customize the style of input file control using CSS.

    http://www.quirksmode.org/dom/inputfile.html

    If you are not showing the path of the selected file in the custom input file control, then you don't need javascript at all and just use pure HTML and CSS. Don't worry about antique browsers (IE4/NS4) mentioned in that link where pure HTML/CSS solution doesn't work.


  •  

    Posting Permissions

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