...

View Full Version : a piece of code works ok on firefox but not on chrome



cdzhang
03-20-2012, 12:24 PM
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>
.............................................................................................

devnull69
03-20-2012, 12:43 PM
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

webdev1958
03-20-2012, 01:15 PM
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?

cdzhang
03-20-2012, 01:16 PM
Hi, I changed tried both, but still failed on google chrome! Both ways worked OK on firefox and IE.

webdev1958
03-20-2012, 01:17 PM
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.

devnull69
03-20-2012, 01:47 PM
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.

cdzhang
03-20-2012, 01:48 PM
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.

cdzhang
03-20-2012, 01:49 PM
the form is
<form method="post" action="action_start_initial_registration.php" name="initial_registration" id="initial_registration" enctype="multipart/form-data">

cdzhang
03-20-2012, 01:55 PM
@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.

devnull69
03-20-2012, 01:56 PM
Then the problem is that .click() on an input element of type "file" will generally not work in Chrome.

webdev1958
03-20-2012, 02:26 PM
@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 :cool:


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.

cdzhang
03-21-2012, 05:09 AM
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.

glenngv
03-21-2012, 08:49 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum