I want to customize the input element by changing the text to "Choose file ..." and hide the file's name. Also if a user click the button a window is opened for user to choose file. The code is
<button>
<label for="upload"> Choose file ... </label>
</button>
<input type="file" id="upload" style="display:none">
With Chrome, if I click the button a window is popped up for me to choose the file. However it doesn't work with Firefox and IE. Do you know how can I make it work for all three browsers? Thank you.
The label tag does not work for buttons. It is by and large used with radio buttons. The below should do what you are looking for:
<button id="btnFile" onclick="upload.click();">
Choose file ...
</button>
<input type="file" id="upload" style="display:none">
Your HTML is invalid. A label cannot be a descendant of a button.
Remove the button:
<label for="upload"> Choose file ... </label>
<input type="file" id="upload" style="display:none">
(Tested in Firefox. I don't have a copy of IE to hand.)
If you want something that looks like a button, then style it that way with CSS.
Related
I need to change the "Browse" button text according to the locale in a JSP. (Ex. Russian , Portuguese) for a Spring based project.
Following is the current implementation for the browse button
<td><input type="file" id="file" name="fileName"/></td>
As I know we can't change the text for input type file. It's the default behavior for a browse button int he browser.
I tried the following solution
<input type="button" id="button" value="Browse"/>
<input type="file" id="fileName" style="opacity:0; position:relative; left:-40px;" onchange="javascript: document.getElementById ('fileName').value = this.value"/>
But above one is giving security issue in the browser.
In https://stackoverflow.com/ it's having the ideal solution for this (change text for the browse button using input type file):
<input type="file" name="filename" id="filename-input" value="browse" size="18" style="float: right; width: 250px;">
Can anyone help me to resolve this problem or the way to implement above solution( https://stackoverflow.com/ file upload).
You might be looking for this answer to a similar question.
It suggests using Bootstrap File-system css styling.
suggest you to do it this way to keep it simple:
<input type="file" style="display:none"/>
<button id="browse">whatever</button>
$('#browse').click(function(){
$('input[type="file"]').trigger('click');
});
I have this problem Only on IE7 and IE8.
I have a shadowbox that contains an input type file in it.
When this shadowbox is loaded, the input file is invisible... until I mouse hover it.
It's a reall basic form with a really basic input file:
<form action="" method="post" enctype="multipart/form-data" autocomplete="off">
<input type="file" name="img" onChange="$('#button_img').css('display','');" />
<input type="hidden" name="step_crop" value="1" />
<input type="submit" value="" />
</form>
I tried to delete everything on the file and only leave the form with one element which is, yeah, the evil input file, but still invisible on page load until I hover it.
Someone would have an idea ?
(Video link for the behavior: http://www.screenr.com/6ICH )
Please try to close your div and input tags properly. does it work?
Hi, I can see input field in both IE7 and IE8. Can you please add your view how it looks like before and after
If I have a submit button with a span inside it, it looks like Chrome still allows the span to be clicked when the button is set to disabled.
<form method="post" action="/changestatus" id="yw0">
<input type="hidden" name="id" value="5">
<input type="hidden" name="status" value="enabled">
<button type="submit" disabled="disabled">
<span>Submit</span>
</button>
</form>
The preceding code works as expected in Firefox, but not in Chrome.
Any ideas on fixing this (without JS if possible).
Thanks!
For submitting the form it does not submit in either browser (as it should).
If, though, with allows the span to be clicked you mean javascript firing the click event when clicking on it, then indeed there is a difference on how they handle this case.. (you will have to handle it through javascript)
If you don't want the form to submit you can add this code to your form element.
<form onSubmit="return false;">
I know its a JavaScript fix, but it is one.
I have a html file selector in index.php file.Code is given bellow
//index.php (This is just an example)
<form enctype="multipart/form-data" action="http://myserver/abc/upload.php" method="POST">
Select image to upload :
<input name="photo" type="file" size="30" width="250">
<input type="submit" value="Upload"/>
</form>
In firefox browser I can see file selector with a text field(which display the file path) and a button named 'Browse'(As a normal file selecting field)
But in chrome browser I can't see the text field.And button name is 'Chose file' not 'Browse'.
How can I fix this?
I need to display this in all browsers as it is display in firefox browser
there is no standard way of customizing file input style, but you can find a tons of css/js tricks. use keywords: custom css file input
Change your file type by adding this inline style
<input name="photo" type="file" size="30" width="250" style="line-height:0;">
I have a php page, which launches a popup window containing a form with checkboxes. The originating window includes an external stylesheet.
The form html for the popup window is:
<form name="statusForm" action="post.php=" method="post" enctype="multipart/form-data">
<label for="Test">Test:</label>
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<label for="Test">TestTest:</label>
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<label for="Test">TestTestTest:</label>
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<input name="Submit" value="submit" type="submit">
</form>
The form has been trimmed, and fields renamed to test for posting..
In the external stylesheet, I have:
label {
min-width: 5em;
}
The checkboxes are still not aligned. Do I have to included the stylesheet explicitly in the html of the popup window, or is it something else?
New windows don't inherit any kind of stylesheet rules from their parents.
Also, if you're using Firefox, I urge you to install the Firebug extension, which will allow you to 'Inspect' an HTML element to see (and even modify) the active CSS rules.
Yes, the popup window needs to be its own full HTML page.
Edit
Unless it is an AJAX popup, in which case it does NOT need to be a full HTML page.
Keep in mind that min-width is not supported in Internet Explorer 6. Also, I'd use some dividing element like <div> or <li> (within an <ul>) rather than a <br />.
Rich